vue库采用rollup进行打包,一般项目使用webpack,类库使用rollup
1.npm init
2.安装依赖
npm i rollup rollup-plugin-babel @babel/core @babel/preset-env
npm i rollup-plugin-serve
rollup核心包
rollup-plugin-babel:一个用于 rollup 和 babel 之间无缝集成的 rollup 插件。
@babel/core:babel核心模块
@babel/preset-env:es6转es5
3.配置rollup.config.js
文件
// 开启服务的插件
import serve from 'rollup-plugin-serve'
// rollup使用babel的 的插件
import babel from 'rollup-plugin-babel'
export default {
input: './src/index.js',
output: {
file: 'dist/vue.js',
name: 'Vue',//全局变量
format: 'umd',//统一模块化
sourcemap: true//开启映射
},
plugins: [
babel({
exclude: 'node_modules/**',
}),
serve({
open: true, //自动打开浏览器
openPage: '/public/index.html',
port: '8888',
contentBase: '',//想对当前目录查找openPage
})
]
}
4.配置babel
在根目录创建.babelrc
文件
{
"presets": [
"@babel/preset-env"
]
}
5.添加运行脚本
//放在package.json文件的scripts属性中
"dev":"rollup -c -w"