blog
blog copied to clipboard
lmk123
Rollup 与 Webpack
自从接触到 Webpack 之后我就爱上了它。
从 #27 开始，我就在我的项目里全面使用 Webpack 了，无论是写一个小的工具库（如 selection-widget、connect.io）还是一个完整的“产品”（划词翻译）。
说起来，一开始关注 Webpack 是因为我很喜欢 Vue.js，而它就是使用 Webpack 进行开发的，但我一直以来都有一个疑惑：为什么 Vue.js 生成出来的代码如此干净？你可以对比一下我的 connect.io 项目用 Webpack 生成的代码。
然后我发现，Vue.js 在开发时用的是 Webpack，但是最后将文件打包在一起的时候用的是 Rollup（见 vue/build.js）。生成的代码之所以这么干净，是因为 Vue.js 本身除了 ES6 module，几乎没有用到其它 ES6 语法（箭头函数、let const、变量解构之类的）。
类似于 Webpack，Rollup 也是一个模块打包工具，不过它的特色是仅加载模块里用得到的函数以减小文件大小。鉴于这一特性，它特别适合用来写工具库，比如我的 connect.io 就可以用它来生成最终的文件。另外，它生成的代码不会像 Webpack 那样用很多函数来包装模块，这一点我很喜欢——因为所有代码都在同一个函数作用域里，所以 Babel 不需要在每一个模块里都注入辅助函数了（即使用了 transform-runtime 也仍然会留有一点辅助函数。）
但就我来说，如果我要开发一个仅包含 js 文件的模块，我会用 Rollup 生成最终的文件，但如果我要写一个“产品”，我仍然会用 Webpack。Webpack 提供了太多实用的功能来提升开发（及部署）体验，这甚至可以让我忽略打包后文件的大小。而且，类似于 Vue.js，即使是开发一个模块，我仍然会使用 Webpack，只是在最后将模块合并的时候才会用到 Rollup.
