前言
rollup比较适合打包js的sdk或者封装的框架等，例如，vue源码就是rollup打包的。webpack比较适合打包一些应用，例如SPA或者同构项目等等。最近我们对rollup小试牛刀了一下。简单分享一些注意事项吧。
rollup基础
rollup基础知识及插件的一些使用，网上有不少资料，可以去查阅。
rollup中文网：www.rollupjs.com/guide/zh#-d…
问题记录吧
下面主要记录一下rollup使用过程中的一些报错及解决方案吧。
错误一：
You must supply options.name for IIFE bundles
出现这个报错，是要在options中指定name，例如如下：
output: {
file: resolve(`js/haorooms.${type}.js`),
format: type,
name: 'haorooms',
banner
},
复制代码错误二
[!] (commonjs plugin) SyntaxError: Unexpected token
出现这个问题，可能有几个原因
1、rollup-plugin-commonjs未引入，或者加载循序不对
我们知道，webpack loader是有加载循序的（从右到左，从下到上），rollup虽然没有严格的加载循序，但是我通常是将commonjs放到babel编译之后。如下：
babel({
exclude: 'node_modules/**', // 排除node_modules 下的文件
runtimeHelpers: true
}),
commonjs(),
复制代码2、缺少babel类 我按照babel类熟悉编译插件作为这个项目的依赖。
npm install --save-dev babel-plugin-transform-class-properties
复制代码.babelrc配置如下：
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-runtime", "external-helpers","transform-class-properties"]
}
复制代码注：上面的配置是babel 7.0以下的方式，假如babel7.0以上，用另外的方式配置，参见：babeljs.io/docs/en/v7-…
blog.zfanw.com/babel-js/
错误三
code: 'BAD_BUNDLE_TRANSFORMER', plugin: 'uglify'
这个问题比较坑爹，其实我用rollup打包demo代码是没有问题的，但是打包我的js就有问题了，好奇怪，后来我发现是swiper的问题，因为我依赖了swiper。关于swiper打包，在webpack中也有问题，通常babel打包之后，并不会把swiper的es6语法转换。有时候webapck也会报错，大致是
dom7 undefined ..
复制代码webpack解决方案如下：
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'swiper': 'swiper/dist/js/swiper.js',
'@': resolve('src')
}
},
复制代码指定一个别名
但是发现rollup中好像没有这个方式，无奈，我在引入swiper的时候如下处理
import Swiper from 'swiper/dist/js/swiper.js'
复制代码这样打包的时候就不会有问题了。
错误四
process not defined
复制代码这个错误是在打包成功之后，浏览器运行发现的，发现打包之后的代码中有process.env.NODE_ENV
解决方案：
import replace from 'rollup-plugin-replace'
const env = process.env.NODE_ENV
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify(env)
}),
]
复制代码把 process.env.NODE_ENV这个替换掉
rollup 批量打包的方式
我们用rollup打包，一般都会打如下方式
amd – 异步模块定义，用于像RequireJS这样的模块加载器
cjs – CommonJS，适用于 Node 和 Browserify/Webpack
es – 将软件包保存为ES模块文件
iife – 一个自动执行的功能，适合作为