一、功能简介
Rollup 是一个 JavaScript 模块打包器，可以把小块代码编译成大块复杂的代码，它特别适合于 ES6 模块化的打包。与其他模块打包工具不同，它使用的是ES6的标准语法进行打包。生成的代码可读性高，并且体积小，可以有效地减少代码的加载时间，提升性能。
二、基本使用
1、全局安装rollup
$ npm install -g rollup2、新建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作为标准，体积小，性能好。与其它打包工具比较，它的代码更可读性好，且生成的代码量更少。
同时，我们还可以了解到一些高级功能，例如：插件的使用，配置文件的使用等等。
因此，在实际工作中，我们应该灵活地选择不同的工具来完成我们的工作，并尽可能熟悉它们的使用方式，这样才能使我们的代码更优雅，更好维护。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/308764.html
微信扫一扫 
支付宝扫一扫 