rollup 也是一款打包工具,比 webpack 要轻量许多,用于弥补 gulp 的无 tree-shaking 是很好的选择,最大的用途是打包生产一个库文件,比如 sdk.js 之类。虽然 webpack 也可以做到,但是 webpack 较重,打包后的文件有部分 webpack 内部代码,如__webpack__require 之类的函数定义,给人一种不干净的感觉。而 rollup 打出来的包就很干净,没有其他冗余代码。
鲸鱼 注我用它打包过:
单个 d3 图形包
使用方式
通过插件导入 commonjs 模块
需要两个插件共用
rollup-plugin-commonjs
rollup-plugin-node-resolve
// rollup.config.js
import commonjs from ‘rollup-plugin-commonjs’;
import nodeResolve from ‘rollup-plugin-node-resolve’;
export default {
input: ‘main.js’,
output: {
file: ‘bundle.js’,
format: ‘iife’
},
plugins: [
nodeResolve({
jsnext: true,
main: true
}),
commonjs({
// non-CommonJS modules will be ignored, but you can also
// specifically include/exclude files
include: ‘node_modules/**’, // Default: undefined
exclude: [‘node_modules/foo/**’, ‘node_modules/bar/**’], // Default: undefined
// these values can also be regular expressions
// include: /node_modules/
// search for files other than .js files (must already
// be transpiled by a previous plugin!)
extensions: [‘.js’, ‘.coffee’], // Default: [‘.js’]
// if true then uses of `global` won’t be dealt with by this plugin
ignoreGlobal: false, // Default: false
// if false then skip sourceMap generation for CommonJS modules
sourceMap: false, // Default: true
// explicitly specify unresolvable named exports
// (see below for more details)
namedExports: {‘./module.js’: [‘foo’, ‘bar’] }, // Default: undefined
// sometimes you have to leave require statements
// unconverted. Pass an array containing the IDs
// or a `id => boolean` function. Only use this
// option if you know what you’re doing!
ignore: [‘conditional-runtime-dependency’]
})
]
};
现实项目示例可以戳 vue 源码这里
然后在配置的 plugins 里面使用
参考
Rollup 常用配置 rollup.js 文档