webpack和browserify的区别
一、
选择不同的前端构建工具,也就意味着不同的前端开发体系。
只要业务足够简单,只需要打包一个文件,那么选择什么构建工具都没问题,有问题的是有一定规模的网站,如果还是只打包成一个文件,那么只做一个很小的改动时,意味着都要重新下载打包文件。
webpack相比browserify,更加傻瓜式、一体化。而browserify则需要自行配置。相对的,进行源码分析和改进时,webpack更加复杂,而browserify则比较容易。
知乎:https://www.zhihu.com/question/40598635
简单来说,webpack 太复杂,是比较全面的解决方案(因此配置也比较复杂),而 browserify 只是一个核心,其本身也是由不同模块组成的,更符合 unix 的干好一件事的哲学。用 webpack 的某些功能和 browserify 去比较是不太公平的,因为哲学不一样。browserify 核心代码没多少,都拆分成模块了,你花一天时间大概过一篇,然后自己动手修改扩展需要的部分就好,这样你能对你的项目有很强的把控。而 webpack 是另一条路,相当于外包了前端构建这部分,虽然直接上手可能很方便,但是遇到坑的时候,或者需要自己实现一点什么想法的时候,可能会比较困难和麻烦一点。
二、
参考:https://zhuanlan.zhihu.com/p/27046322
browserify跟webpack差不多同期出现,但是大家常用webpack而不是browserify的原因有:
- browserify是遵循commonjs模块规范的,对于AMD和ES6模块规范不适用。
- browserify是专门解决js文件的加载而存在的,其他资源的加载并不完善,为了支持其他资源加载,总是需要配合gulp\grunt来使用,增加了工作量和工作难度。
- browserify无法实现多文件打包,即无法实现按需加载,每次加载页面都是全量加载js。
这四个工具的区别:
- gulp和grunt是前端自动化构建的工具,帮助用户完成js\css压缩、less编译等(只不过现在webpack也可以完成压缩等任务,可以替代gulp的这部分功能)。
- webpack和browserify是前端模块化方案,与seajs和requirejs是一个东西,只不过seajs和requirejs是在线编译方案,引入一个CMD\AMD编译器,让浏览器能认识export、module、define等,而webpack和browserify是预编译方案,提前将es6模块、AMD、CMD模块编译成浏览器认识的js。
- 他们之间的区别见以上两点,只不过相互之间也会有一些相似的功能。
- grunt配置复杂繁重,是基于文件流的操作,比较慢;gulp是基于内存流的操作,配置轻量级,代码组织简单易懂,异步任务。
- webpack的话,就是配置复杂,文档杂乱,插件繁多,难于上手。
参考:http://blog.csdn.net/xllily_11/article/details/51782005
这篇文章 讲了目前常见的最佳体验:
package.json中的scripts命令+webpack,实在无法实现时,再引入gulp等即可。