快速学习 rollup 打包
共 1272字,需浏览 3分钟
·
2021-06-15 20:01
1、rollup是什么
JavaScript的ES模块打包器
从一个入口文件开始,将所有使用到的模块文件都打包到一个最终的发布文件中
2、与webpack的差异
定位不同:webpack偏向于应用打包;rollup更专注于JavaScript类库打包
(1)如果你需要代码拆分(Code Splitting),或者你有很多静态资源需要处理,再或者你构建的项目需要引入很多CommonJS模块的依赖,那么 webpack 是个很不错的选择;
(2)如果您的代码库是基于 ES2015 模块的,而且希望你写的代码能够被其他人直接使用,你需要的打包工具可能是 Rollup;
3、rollup的重要特性
(1)它使用ES6的模块标准,这意味着你可以直接使用import和export而不需要引入babel(当然,在现在的项目中,babel可以说是必用的工具了)。
(2)Rollup.js一个重要特性叫做'tree-shaking',这个特性可以帮助你将无用代码(即没有使用到的代码)从最终的生成文件中删去。(这个特性是基于ES6模块的静态分析的,也就是说,只有export而没有import的变量是不会被打包到最终代码中的)
快速开始
npm install rollup -D
然后在本地创建一个项目:
mkdir -p my-project
cd my-project
其次我们创建一个入口文件,使用 lodash 测试代码写个简单的 demo:
import after from 'lodash/after'
var saves = ['profile', 'settings'];
var done = after(saves.length, function() {
console.log('done saving!');
});
done()
done()
基本代码准备好了之后,我们写 rollup 的配置文件 (rollup.config.js 在根目录下):
export default {
input:'src/main.js',
output:{
file:'dist/bundle.cjs.js',//输出文件的路径和名称
format:'cjs',//五种输出格式:amd/es6/iife/umd/cjs
name:'bundleName'//当format为iife和umd时必须提供,将作为全局变量挂在window下
}
}
package.json 添加一条运行的命令:
{
"scripts": {
"build": "rollup --config"
},
}
这样在根目录下就生成了一个bundle.cjs.js,就是我们想要的打包后的文件。