基础知识
- 特性
- 前端模块打包工具,可以让bundle文件最小化,避免引入冗余模块代码,有效减少文件请求大小。
- 编译
- 在 Rollup 编译模块的过程中,通过 Tree-shacking 的方式来剔除各模块中最终未被引用到的方法,通过仅保留被调用到的代码块来缩减 bundle 的大小。
- Tree-shaking 的作用
- 会抽取引用到的模块内容,将它们置于同一个作用域下,进而直接用变量名就可以访问各个模块的接口;而不像 webpack 这样每个模块外还要包一层函数定义,再通过合并进去的 define/require 相互调用。当然这种方法需要 ES2015 的解构赋值语法来配合,多亏了它,Rollup 才能有效地对模块内容进行可靠的静态分析。
- 使用
- npm i rollup
- rollup src/main.ts -o rel/bundle.js -f cjs
- rollup 入口文件 -o 输出文件 -f cjs
- cjs : commonJs
- amd : AMD
- es6 : ES6(ES2015)
- Global : iife
- UMD : umd
配置文件
- 根目录创建 rollup.config.js
- 配置文件内容:
“`
import resolve from ‘rollup-plugin-node-resolve’
import commonjs from ‘rollup-plugin-commonjs’
import uglify from ‘rollup-plugin-uglify’
import angularOptimizer from ‘rollup-plugin-angular-optimizer’
import babel from ‘rollup-plugin-babel’export default {
entry: ‘src/main.js’, //入口
format: ‘cjs’, //规范
dest: ‘rel/bundle.js’, // 输出文件
plugins:[babel(), resolve(), angularOptimizer(), commonjs(), uglify()], //使用的插件
};
“`- 执行 rollup -c
- 如果你的配置文件另有其名(例如“rollup.config.dev.js”),在后面加上配置文件名即可:rollup -c rollup.config.dev.js
配置中的插件【plugins】
babel: rollup 需要独立写个文件,可以写在src下
- 确保安装了 rollup-plugin-babel 和 babel 预设 babel-preset-es2015-rollup
- npm i rollup-plugin-babel babel-preset-es2015-rollup
- .babelrc :
{ "presets": ["es2015-rollup"] }
- 确保安装了 rollup-plugin-babel 和 babel 预设 babel-preset-es2015-rollup
- resolve
- rollup-plugin-node-resolve
- commonjs
- rollup-plugin-commonjs
- uglify 压缩混淆文件
- rollup-plugin-uglify
- optimizer
- rollup-plugin-angular-optimizer
- 如果想要在模块中来被调用执行,可将配置文件修改为:
var rollup = require( 'rollup' );
var babel = require('rollup-plugin-babel');
rollup.rollup({
entry: 'src/main.js',
plugins: [ babel() ]
}).then( function ( bundle ) {
bundle.write({
format: 'umd',
moduleName: 'main', //umd或iife模式下,若入口文件含 export,必须加上该属性
dest: 'rel/bundle.js',
sourceMap:true //利于调试
});
});
之后用node直接执行: node rollup.config.dev.js
- 注意 “rollup.rollup()”返回一个带着 bundle 作为 resolve 回调参数的 Promise 对象,我们常规直接使用语法糖 bundle.write 来打包输出文件
- sourceMap:为了方便调试编译后的文件
- 这样编译后,rollup 会自动生成一个 rel/bundle.js.map 关联到 rel/bundle.js 中。也可以将其直接内联在 bundle 里而不是独立生成一个 map 文件: sourceMap: ‘inline’