使用Rollup 搭建开发环境

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"
  },