学习下一代的ES6模块化打包工具——Rollup

最新推荐文章于 2023-03-26 20:00:04 发布

龙行天下01

最新推荐文章于 2023-03-26 20:00:04 发布

阅读量901

点赞数

分类专栏： es6 ThreeJS 文章标签： webpack 前端 javascript

原文链接：https://zhuanlan.zhihu.com/p/27832148

版权

es6 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

ThreeJS

8 篇文章 0 订阅

订阅专栏

一、为什么要用模块化

更好的代码组织方式

如果单个文件越来越大，维护起来出错的几率也会越来越大。模块式的开发，一个文件就是一个模块，控制了文件的粒度，每个模块可以专注于一个功能。

更好的依赖处理

不再需要手动排序多个 <script>标签引用顺序，模块加载器已经帮你做好了。

多人协作互不干扰

和他人合作的时候，经常修改同一个文件？很容易引起冲突？模块化呀。

性能优化

模块化后的代码可以合成一个单一的文件进行部署，减少`HTTP`请求数

... 等等

二、为什么要使用 Rollup 打包工具？

简单做一个测试, 我们准备一个 module.js 文件和 entry.js 文件, 分别使用 Rollup 和 Webpack 打包。

package.json 如下：

module.js 如下：

entry.js 如下：

rollup.config.js 如下：

webpack.config.js 如下：

1. Rollup 可以打出更快更小的包，即使在最坏的情况下，它仍然会小于其他工具产生的捆绑。如图：

Webpack 打包后的 webpack3.0_bundle.js 文件约 3k, 而 Rollup 打包后的 bundle_rollup_iife.js 文件只有1k。

2. 杀手锏——只导出你需要的

Rollup 是第一个提出 Tree Shaking 的打包工具。想对 Tree Shaking 有更全面的了解，推荐阅读 Rich_Harris 的 [Tree-shaking versus dead code elimination](https://medium.com/@Rich_Harris/tree-shaking-versus-dead-code-elimination-d3765df85c80)。简单来说，Rollup 会静态分析你所引入的模块，去掉没有真正被用到的部分，只引入你需要的部分，减少项目的体积。

通过执行 npm run webpack , 我们得到了 Webpack 打包后的 webpack3.0_bundle.js文件中部分代码截图：

通过执行 npm run rollup -- -c , 我们得到了 Rollup 打包后的 bundle_rollup_iife.js 文件内容：

我们 Rollup 打包后的文件并没有输出我们没有调用的函数 weDontWant。

此外， RollupJS 打包会将所有模块打包在一个大的闭包内，从而使代码在浏览器中具有更快的执行速度。

补充说明：Webpack2.0 已经支持 Tree Shaking, 但配置较为复杂。配置方法可以[参考官网](Tree Shaking)

Webpack 3.0 新增 作用域提升 配置。由于作用域提升会移除模块外的函数包装，你可以看到一些小体积的改进。然而，更显著的改进是 Javascript 在浏览器中加载的速度。

3. Rollup 是基于ES6 实现的代码模块化

Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块是 ES6 语法的一部分, ES6 语法是标准化的语言。所以 ES6 模块编写的代码是不会过时的。即便不是这样，也有很多喜欢 ES6 模块的理由。

关于全面的介绍，推荐阅读 [Axel Rauschmayer](Profile): [ECMAScript 6模块：最终语法](ECMAScript 6 modules: the final syntax)

ES6 的部分功能：

- 语法更好

- 模块导出的是绑定，而不是值。

- 支持循环依赖

来看一段代码：

CommonJS 写法如下：