rollup学习小记

周末在家重构网关的Npm包，用到了rollup，记下笔记

rollup适合库library的开发，而webpack适合应用程序的开发。 rollup也支持tree-shaking，自带的功能。 package.json 也具有 module 字段，像 Rollup 和 webpack 2 这样的 ES6 感知工具(ES6-aware tools)将会直接导入 ES6 模块版本。

• module: cjs / es / umd / iife / amd
• module: umd 要指定name，即暴露的对象名

{output: {file: 'dist/index.umd.js',format: 'umd',name: 'ClientApi'} } 复制代码

配置文件

rollup.config.js

$ rollup -c # compile $ rollup -c -w # compile and watch 复制代码

rollup -w时，会抛出ROLLUP_WATCH环境变量为true

plugins

• 插件执行顺序，从上至下
• 使用 rollup-plugin-json，令 Rollup 从 JSON 文件中读取数据。
• Rollup 可以通过插件(rollup-plugin-node-resolve)导入已存在的 CommonJS 模块。
• rollup-plugin-commonjs 插件就是用来将 CommonJS 转换成 ES2015 模块的。
• rollup-plugin-uglify压缩代码， import {uglify} from 'rollup-plugin-uglify', uglify()
• 使用 Babel 和 Rollup 的最简单方法是使用 [rollup-plugin-babel]（github.com/rollup/roll…

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

我们设置"modules": false，否则 Babel 会在 Rollup 有机会做处理之前，将我们的模块转成 CommonJS，导致 Rollup 的一些处理失败。

others

• external配置，在生成module文件时，可以用到，避免生成文件里有引用的包

总结

以上是生活随笔为你收集整理的rollup学习小记的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。