rollup安装配置

rollup介绍

rollup官网

rollup是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。rollup对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。它可以帮助你从一个入口文件开始，将所有使用到的模块文件都打包到一个最终的发布文件中。它能优化冗余代码，体积更小，适用于类库，vue和react都是通过rollup打包的。

rollup安装配置

1. 安装rollup和babel插件：npm install --save-dev rollup rollup-plugin-babel babel-plugin-external-helpers rollup-plugin-node-resolve

2. 安装babel：npm install --save-dev babel-core babel-preset-env

3. 根目录创建.babelrc文件，并对预设(presets) 和 插件(plugins) 进行配置：

   { "presets": [ ["latest", { "es2015": { "modules": false } }] ], "plugins": ["external-helpers"] }

4. 根目录创建rollup.config.js并配置，内容参考如下：

   import babel from 'rollup-plugin-babel' import resolve from 'rollup-plugin-node-resolve'

   export default{ input: "src/index.js", output: { file: "build/bundle.js", format: "umd" }, plugins: [ resolve(), babel({ exclude: 'node_modules/**' }) ] }

5. 配置package.json中的scripts

   "scripts": { "start": "rollup -c rollup.config.js" },

6. 运行 npm start

成功后你就可以在./build/bundle.js中看到打包完成的代码