0、前言
rollup也是一款打包工具，比webpack要轻量许多，用于弥补gulp的无tree-shaking是很好的选择，最大的用途是打包生产一个库文件，比如sdk.js之类。虽然webpack也可以做到，但是webpack较重，打包后的文件有部分webpack内部代码，如__webpack__require之类的函数定义，给人一种不干净的感觉。而rollup打出来的包就很干净，没有其他冗余代码。
1、使用方式
首先安装rollup
npm i rollup
再看rollup的几种调用形式
- 命令行运行
rollup src/main.js -o rel/bundle.js -f cjs //将main.js(es5)编译输出至bundle.js(commonjs)
- 配置文件形式
//新建一个rollup.config.js
export default {
entry: 'src/main.js',
format: 'cjs',
dest: 'rel/bundle.js' // 输出文件
};
然后执行
rollup -c //当你的配置文件另有其名(dev),执行 rollup -c rollup.config.dev.js
- 模块形式(方便配合gulp等其他工具)
如将rollup.config.js 写出这样
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'
});
});
就可用node rollup.config.dev.js 直接执行
2、配置项
- input
入口文件地址 - output
output:{
file:'bundle.js', // 输出文件
format: 'cjs, // 五种输出格式：amd / es6 / iife / umd / cjs
name:'A', //当format为iife和umd时必须提供，将作为全局变量挂在window(浏览器环境)下：window.A=...
sourcemap:true //生成bundle.map.js文件，方便调试
}
- plugins
最常用的就是babel插件了,比较不爽的是，babel 的预设不像 webpack 可以直接写在配置文件里，而还是得独立写个“src/.babelrc”（注意我们可以写在 src 下，而不是非得放在项目根目录下），还得确保装了插件：npm i rollup-plugin-babel
// import babel from 'rollup-plugin-babel';
plugins:[babel()]
// .babelrc npm i -D babel-preset-env babel-plugin-external-helpers
{
"presets": [
["env", {
"modules": false
}]
],
"plugins": ["external-helpers"] //只引入一次babel的helper函数
}
- external
external:['lodash'] //告诉rollup不要将此lodash打包，而作为外部依赖
- global
global:{
'jquery':'$' //告诉rollup 全局变量$即是jquery
}
3、注意点
- rollup无法识别node_modules中的包，需要安装插件npm install --save-dev rollup-plugin-node-resolve，然后在plugins中使用：
import resolve from 'rollup-plugin-node-resolve';
export default {
input: 'src/main.js',
output: {
file: 'bundle.js'
format: 'cjs'
},
plugins: [ resolve() ]
};
- node_modules中的包大部分都是commonjs格式的，要在rollup中使用必须先转为ES6语法，为此需要安装插件 rollup-plugin-commonjs
4、附一份react-redux开源项目的rollup配置文件
import nodeResolve from 'rollup-plugin-node-resolve' // 帮助寻找node_modules里的包
import babel from 'rollup-plugin-babel' // rollup 的 babel 插件，ES6转ES5
import replace from 'rollup-plugin-replace' // 替换待打包文件里的一些变量，如 process在浏览器端是不存在的，需要被替换
import commonjs from 'rollup-plugin-commonjs' // 将非ES6语法的包转为ES6可用
import uglify from 'rollup-plugin-uglify' // 压缩包
const env = process.env.NODE_ENV
const config = {
input: 'src/index.js',
external: ['react', 'redux'], // 告诉rollup，不打包react,redux;将其视为外部依赖
output: {
format: 'umd', // 输出 ＵＭＤ格式，各种模块规范通用
name: 'ReactRedux', // 打包后的全局变量，如浏览器端 window.ReactRedux
globals: {
react: 'React', // 这跟external 是配套使用的，指明global.React即是外部依赖react
redux: 'Redux'
}
},
plugins: [
nodeResolve(),
babel({
exclude: '**/node_modules/**'
}),
replace({
'process.env.NODE_ENV': JSON.stringify(env)
}),
commonjs()
]
}
if (env === 'production') {
config.plugins.push(
uglify({
compress: {
pure_getters: true,
unsafe: true,
unsafe_comps: true,
warnings: false
}
})
)
}
export default config
