使用 Rollup 打包基于 Es 6 编写的 javascript 库的一般配置

前言

近期项目需要给APP编写类似于 jweixin-1.0.0.js 这样的桥接 APP 与 Webview 中 H5 页面的 js-sdk 类库，使用 gulp、gruntjs 或者 webpack 来搞有点重，因为 rollup 天生就对 Es 6 语法的支持非常友好，加上其首创的 tree shaking 技术使得打包出来的 js-sdk类库文件体型更小，还有官方也是非常推荐使用 rollup 进行 js 类库的开发，于是直接选用 Rollup 来自动化沟建非常适合。

一、项目文件 package.json 文件配置如下：

{
  "name": "rollup-starter-app",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "npm-run-all": "^4.1.3",
    "rollup": "^0.60.1",
    "rollup-plugin-babel": "^3.0.3",
    "rollup-plugin-commonjs": "^9.1.3",
    "rollup-plugin-node-resolve": "^3.3.0",
    "rollup-plugin-uglify": "^4.0.0",
    "serve": "^8.1.2"
  },
  "dependencies": {},
  "scripts": {
    "build": "rollup -c",
    "watch": "rollup -c -w",
    "dev": "npm-run-all --parallel start watch",
    "start": "serve public"
  }
}

二、rollup 项目配置文件 rollup.config.js 文件配置如下：

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import {
	uglify
} from 'rollup-plugin-uglify';

// `npm run build` -> `production` is true
// `npm run dev` -> `production` is false
const production = !process.env.ROLLUP_WATCH;

export default {
	input: 'src/myapp-jssdk.js',
	output: {
		file: 'public/myapp-jssdk.js',
		format: 'umd', // amd: 异步模块定义，用于像RequireJS这样的模块加载器；cjs: CommonJS，适用于 Node 和 Browserify/Webpack；umd：通用模块定义，以amd，cjs 和 iife 为一体；es：将软件包保存为ES模块文件；iife：一个自动执行的功能，适合作为<script>标签。（如果要为应用程序创建一个捆绑包，您可能想要使用它，因为它会使文件大小变小。）
		sourcemap: true
	},
	plugins: [
		resolve(), // tells Rollup how to find date-fns in node_modules
		commonjs(), // converts date-fns to ES modules
		babel({
			exclude: 'node_modules/**', // 排除引入的库
			runtimeHelpers: true // 配置runtime，不设置会报错
		}),
		production && uglify() // minify, but only in production
	]
};

三、babel 项目配置文件 .babelrc 文件配置如下：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 10 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime", "external-helpers"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

注意：bebel 6 与 babel 7 相互之间不兼容，因此，用 babel 6 及其相关的插件时，也要引用 6 版本的。同理用 babel 7 及其相关的插件时，也要全部使用 7 版本的。