基于 rollup
搭建 vue 的组件
简单的说,因为对很多类型的静态资源处理没有
webpack
强大,但是基于Tree-shaking
原理用来打包lib
的话,打出来的包,干净,小。所以rollup
比较适合打包小型的 lib 库,不适合用来做开发。
1. 项目传送门
主要流程和包
2. 初始化项目
npm init -y
npm i -D rollup
3. 添加配置文件
// rollup.config.js
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: []
};
2. 添加环境变量
- 安装依赖
npm i -D rollup-plugin-replace cross-env
- 添加
package.json > script
命令:
-c
: 读取配置文件’;-w
: 监听文件变化;
"scripts": {
"start": "cross-env NODE_ENV=development rollup -c -w",
"build": "cross-env NODE_ENV=production rollup -c",
}
- 它在打包时替换文件中的目标字符串
import replace from 'rollup-plugin-replace';
export default {
input: isPrd ? 'src/lib-main.js' : 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
}),
]
};
4. 安装 babel
, 用来编译代码。
- 安装依赖
npm i -D rollup-plugin-babel @babel/core @babel/preset-env
- 增加
.babelrc
{
"presets": [
"@babel/preset-env"
]
}
- 添加到
rollup.config.js
中:
import babel from 'rollup-plugin-babel';
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
babel({
exclude: 'node_modules/**' // 只编译我们的源代码
}),
]
};
5. 添加 .vue
文件解析
- 安装依赖
npm i -D rollup-plugin-vue vue-template-compiler @vue/compiler-sfc
- 导入到配置文件中
import vue from 'rollup-plugin-vue';
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format