一、功能简介
Rollup 是一个 JavaScript 模块打包器,可以把小块代码编译成大块复杂的代码,它特别适合于 ES6 模块化的打包。与其他模块打包工具不同,它使用的是ES6的标准语法进行打包。生成的代码可读性高,并且体积小,可以有效地减少代码的加载时间,提升性能。
二、基本使用
1、全局安装rollup
$ npm install -g rollup
2、新建main.js和foo.js两个 JavaScript文件,main.js使用ES6模块导入foo.js文件
// main.js
import foo from './foo.js';
console.log(foo());
// foo.js
export default function () {
return 'hello world!';
}
3、使用rollup进行打包
$rollup main.js --file bundle.js --format iife
参数说明:
--file - 指定打包后生成的文件名
--format - 指定生成代码的格式,我这里指定了iife。iife即一个自动执行的函数,这样就可以在页面中使用打包后的代码,而不需要担心变量污染问题
三、高级使用
1.Rollup插件
Rollup 有很多插件,可以帮助我们完成一些高级的功能。
1)、rollup-plugin-babel: 将ES6及以上版本的JavaScript代码转成ES5版本
$npm install --save-dev rollup-plugin-babel@latest
配置方式:
// rollup.config.js
import babel from 'rollup-plugin-babel';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
babel({
exclude: 'node_modules/**' // 排除node_modules下的文件
})
]
};
2)、rollup-plugin-commonjs: 将CommonJS模块转成ES6模块
$npm install --save-dev rollup-plugin-commonjs@latest
配置方式:
// rollup.config.js
import commonjs from 'rollup-plugin-commonjs';
export default [{
input: 'src/index.js',
output: {
file: 'dist/bundle-cjs.js',
format: 'cjs',
exports: 'named'
},
plugins: [
commonjs({
include: /node_modules/
})
]
}];
3)、rollup-plugin-node-resolve: 解析导入模块
$npm install --save-dev rollup-plugin-node-resolve@latest
配置方式:
// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
export default [{
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'es'
},
plugins: [
resolve({
jsnext: true,
main: true,
browser: true
})
]
}];
2.Rollup配置文件
当打包的模块较多,或者需要引入多个插件时,可以使用配置文件,将常用配置放到配置文件中,方便代码的维护。
// rollup.config.js
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
babel(), // 配置babel
commonjs(), // 配置CommonJS
resolve() // 配置模块导入
],
external: [
'react',
'react-dom'
]
};
四、总结
通过本文的介绍,我们可以看到rollup是一个高效的 JavaScript模块打包工具,它使用ES6作为标准,体积小,性能好。与其它打包工具比较,它的代码更可读性好,且生成的代码量更少。
同时,我们还可以了解到一些高级功能,例如:插件的使用,配置文件的使用等等。
因此,在实际工作中,我们应该灵活地选择不同的工具来完成我们的工作,并尽可能熟悉它们的使用方式,这样才能使我们的代码更优雅,更好维护。