1 什么是Rollup
Rollup 是一个用于 JavaScript 的模块打包工具,它将小的代码片段编译成更大、更复杂的代码,例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式,而不是以前的 CommonJS 和 AMD 等特殊解决方案。(开发应用时使用webpack , 开发库时使用Rollup)
2 环境搭建
1 npm init 出现package.json等文件
2 npm install rollup @Babel/core @babel/preset-env rollup-plugin-serve rollup-plugin-bebal cross-env-D
注意:如果安装报错 请使用 cnpm
配置rollup.config.js文件
import babel from 'rollup-plugin-babel'
import serve from 'rollup-plugin-serve'
export default {input:'./src/index.js' , //以哪个文件作为打包的入口output:{file:'dist/umd/vue.js', // 出口路径name:'Vue', // 指定打包后全局变量的名字format: 'umd', // 统一模块规范sourcemap:true, // es6-> es5 开启源码调试 可以找到源代码的报错位置},plugins:[ // 使用的插件babel({exclude:"node_modules/**"}),process.env.ENV === 'development'?serve({open:true,openPage:'/public/index.html', // 默认打开html的路径port:3000,contentBase:''}):null]
}
package.json 中配置
"scripts": {"build:dev": "rollup -c","serve": "cross-env ENV=development rollup -c -w"},