Rollup 试炼之路

2019年8月30日 107次阅读 来源: 见见

近来看到挺屡次 Rollup 这个词，再也架不住猎奇，简朴的进修实践了一下。完全项目库地点请戳。

PS: ES6 对应 ES2015，请疏忽这些细节。

什么是 Rollup

Rollup Github 地点。依据官网的诠释，Rollup 是下一代 ES6 模块化东西。ES6 以后，模块化的写法将越发的趋向化，我们会将之前的文件切割成多个的微小模块。那末怎样来高效的构造治理这些文件，又有了许多差别的计划。现有的模块化打包已有如
Browserify 和 Webpack ，那为啥还须要一个新的呢？

上风在哪

  • 能够天生 AMD，CMD，UMD 以至 ES6 模块文件。

  • Tree-shaking

tree-shaking(有晓得中文怎样翻译的同砚迎接留言示知一下)，大抵意义就是打包的时刻会移除未运用到的 ES6 exports模块。想要更深切的相识 tree-shaking 的话，能够看下博士的这篇文章Tree-shaking with webpack 2 and Babel 6。

话题转返来，Rollup 恰是运用了 ES6 的模块特征，所以会使打包后的文件体积更小。如果是 CommonJS 的则须要先经由过程插件转为 ES6 后处理。

对了，值得多说一句的是，Rollup 打包后的代码没有 require，import的，而是直接插入到文件中。

怎样援用

Rollup 支撑 CLI 和 JS API 体式格局，同时供应了一些插件如处理紧缩 babel 转换等题目。(PS: 此处解说采纳 API 的体式格局)

首先在项目根目录建立 rollup.js 文件，装置 npm 的相干依靠

var rollup = require('rollup');
var babel = require('rollup-plugin-babel');
var uglify = require('rollup-plugin-uglify');

rollup.rollup({
    entry: 'src/index.js',
    plugins: [
        babel({
            exclude: 'node_modules/**',
            presets: [ "es2015-rollup" ]
        }),
        uglify()
    ]
}).then(function(bundle) {
    bundle.write({
        // output format - 'amd', 'cjs', 'es6', 'iife', 'umd'
        format: 'umd',
        moduleName: 'dqSystem',
        sourceMap: true,
        dest: 'dqSystem.js'
    });
});

rollup 要领能够设置一些进口文件，依靠插件等，返回的是 bundle 的 Promise 要领。bundle 要领中能够设置文件相干参数，同时也能够天生多份版本文件。详细的 API 参考官网

运用 node rollup.js 实行打包。别的 Rollup 彷佛还不支撑 watch 的设置，我采纳了 npm-watch 的体式格局跳过了。

采过的坑

试用时候不长，且内容比较简朴，能够没遇到一些新鲜的点

  • Rollup.js 中能够 catch 下 error 轻易调试毛病

  • UMD/IIFE 形式中须要moduleName

  • Rollup 的模块援用只支撑 ES6 Module，其他的须要采纳 npm 和 commonjs 的插件去处理

本身YY下

不晓得拿 Rollup 和 webpack 比拟合不合适。我个人照样挺喜好 webpack 的打包体式格局的，关键是功能强大，不过比拟，设置也巨庞杂。而 Rollup 的设置就简朴许多了。试验的项目文件不大，所以没看出来二者在紧缩体积上是不是有显著的差别。Rollup 的tree-shaking也将会在 webpack2 中支撑。所以彷佛并没有什么一定非它不可的觉得。

套用朋侪说的一句话，“任何产物的生命周期都得看社区的活泼水平”。从 github 的 fock 人数上，照样持有很大的保留意见的，一切我个人能够会在一些小型或许疾速项目中做尝试罢了。

参考文章

    原文作者：见见
    原文地址: https://segmentfault.com/a/1190000004331382
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞