使用Rollup搭建开发环境

Rollup介绍：

Rollup 是一个 JavaScript 模块打包器，专注于Javascript类库打包，所以开发库时使用Rollup，
而开发应用时使用 webpack 打包

环境搭建

目录结构：

├── dist   // 打包存放的目录
├── public  // 静态资源文件
│   └── index.html
├── src
│   ├── index.js       // 项目打包入口文件
│   └── ...
├── .babelrc  // babel打包配置
├── package.json
└── rollup.config.js 

1. 安装rollup依赖：

npm install @babel/preset-env @babel/core rollup rollup-plugin-babel rollup-plugin-serve cross-env -D

@babel/preset-env // 预设 es6 -> es5 插件的集合 @babel/core // 代码分析成ast
rollup-plugin-babel // 给rollup集成babel的插件
rollup-plugin-serve // rollup开启serve服务插件
cross-env // 运行跨平台设置和使用环境变量 (就是npm运行时不管是windows还是mac都能运行)

2. rollup.config.js配置如下：

import babel from 'rollup-plugin-babel';
import serve from 'rollup-plugin-serve';

// 常见的模块规范 import export (ESModule)   module.exports require (commonjs)
// AMD 比较老的模块规范  systemjs 模块规范

// ES6Module  commonjs  umd(支持amd 和 cmd)
export default {
    input: './src/index.js',  // 打包入口
    output: {
        format: 'umd', // 模块化类型
        file: 'dist/umd/myModule.js',  // 打包到dist内
        name: 'myModule', // 打包后的全局变量的名字
        sourcemap: true
    },
    plugins: [
        babel({ // 执行 babel 时自动去 .babelrc 文件加载对应配置
            exclude: 'node_modules/**'  // 排除
        }),
        process.env.ENV === 'development'? serve({ // 开端口
            open: true,
            openPage: '/public/index.html',
            port: 3000,
            contentBase: ''
        }) : null
    ]
}

3. .babelrc配置：

{
    "presets": [
        "@babel/preset-env" // es6 -> es5
    ]
}

4. package.json配置

{
	...
	"scripts": {
		"build:dev": "rollup -c", //只打包
		"serve": "cross-env ENV=development rollup -c -w" // -c打包  -w监听改变后重新执行-c打包
	}
	...
}