rollup简单介绍
rollup是一个JavaScript的模块编译器，它比webpack更轻量级。大名鼎鼎的React和Vue就是使用rollup来做打包构建的。
开始正文
- 创建一个
rollup_demo的目录
mkdir rollup_demo && cd rollup_demo
-
创建源码目录
src，以及入口文件main.js -
初始化项目
npm init -y -
安装依赖
npm install -D rollup @rollup/plugin-node-resolve @rollup/plugin-babel
@babel/core @babel/preset-env
如果你需要支持更高级的es6+语法或者特性，请自行安装补丁
- 入口文件
main.js
import { add, sum } from './moduleA.js'
import { multiply, divide } from './moduleB.js'
add();
sum();
multiply();
divide();
- 模块文件
moduleA.js
export const add = function(){
console.log(`this is add`);
}
export const sum = () => {
console.log(`this is sum`);
}
- 模块文件
modeleB.js
export const multiply = () => {
console.log(`this is multiply`);
}
export const divide = () => {
console.log(`this is divide`);
}
- rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
export default {
input:'src/main.js',
output: {
dir:'dist',
format: 'umd'
},
plugins: [
resolve(),
babel({
babelHelpers: 'bundled',
exclude:'node_modules/**'
}),
]
}
- .babelrc
{
"presets": [
"@babel/env"
]
}
- ✅ 运行命令
rollup -c rollup.config.js
结束
这样一个简单的rollup和babel相结合的配置就弄好了，它非常便于我们在公司做一些没有使用工程化的例如JQ等原生开发来使用，当然一些开源大的类库项目也都在使用呢～。
