Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码, rollup.js更专注于Javascript类库打包 (开发应用时使用Wwebpack,开发库时使用Rollup
安装
npm install @babel/preset-env @babel/core rollup rollup-plugin-babel rollup-plugin-serve cross-env -D
rollup.config.js
import babel from 'rollup-plugin-babel';
import serve from 'rollup-plugin-serve';
export default {
input: './src/index.js',
output: {
format: 'umd', // 模块化类型,默认情况下可以把Vue变量放到 window 上
file: 'dist/umd/vue.js',
name: 'Vue', // 打包后的全局变量的名字
sourcemap: true
},
plugins: [
babel({
exclude: 'node_modules/**' // 这个目录不需要用 babel 转换
}),
process.env.ENV === 'development'
? serve({
open: true,
openPage: '/public/index.html',
port: 3000,
contentBase: '' // 根目录
})
: null
]
};
配置.babelrc文件
{
"presets": [
"@babel/preset-env"
]
}
package.json文件配置
"scripts": {
"build:dev": "rollup -c",
"serve": "cross-env ENV=development rollup -c -w"
},
-c 表示要使用配置文件 -w 表示文件内容变化后重新打包
Vue响应式原理 →