使用 rollup 打包 JavaScript SDK

本文最后更新于:2020年2月23日 凌晨

使用 rollup 打包 JavaScript SDK

吾辈已经写了一个 TypeScript/JavaScript Cli 工具 liuli-cli,如有需要可以使用这个 Cli 直接生成一个开箱即用 SDK 项目,然后就可以直接开始写自己的代码,不需要太过关心下面的内容了 – 因为,它们都已然集成了。

场景

为什么要使用打包工具

如果我们想要写一个 JavaScript SDK,那么就不太可能将所有的代码都写到同一个 js 文件中。当然了,想做的话的确可以做到,但随着 JavaScript SDK 内容的增加,一个 js 文件容易造成开发冲突,以及测试上的困难,这也是现代前端基本上都依赖于打包工具的原因。

为什么打包工具是 rollup

现今最流行的打包工具是 webpack,然而事实上对于单纯的打包 JavaScript SDK 而言 webpack 显得有些太重了。webpack 终究是用来整合多种类型的资源而产生的(ReactJS/VueJS/Babel/TypeScript/Stylus),对于纯 JavaScript 库而言其实并没有必要使用如此 强大 的工具。而 rollup 就显得小巧精致,少许配置就能立刻打包了。

步骤

该记录的代码被吾辈放到了 GitHub,有需要的话可以看下。

前置要求

开始之前,我们必须要对以下内容有所了解

  • JavaScript
  • npm
  • babel
  • uglify
  • eslint

需要打包的代码

// src/wait.js
/**
 * 等待指定的时间/等待指定表达式成立
 * @param {Number|Function} param 等待时间/等待条件
 * @returns {Promise} Promise 对象
 */
function wait(param) {
  return new Promise(resolve => {
    if (typeof param === 'number') {
      setTimeout(resolve, param)
    } else if (typeof param === 'function') {
      var timer = setInterval(() => {
        if (param()) {
          clearInterval(timer)
          resolve()
        }
      }, 100)
    } else {
      resolve()
    }
  })
}

export default wait

// src/fetchTimeout.js
/**
 * 为 fetch 请求添加超时选项
 * 注:超时选项并非真正意义上的超时即取消请求,请求依旧正常执行完成,但会提前返回 reject 结果
 * @param {Promise} fetchPromise fetch 请求的 Promise
 * @param {Number} timeout 超时时间
 * @returns {Promise} 如果超时就提前返回 reject, 否则正常返回 fetch 结果
 */
function fetchTimeout(fetchPromise, timeout) {
  var abortFn = null
  //这是一个可以被 reject 的 Promise
  var abortPromise = new Promise(function(resolve, reject) {
    abortFn = function() {
      reject('abort promise')
    }
  })
  // 有一个 Promise 完成就立刻结束
  var abortablePromise = Promise.race([fetchPromise, abortPromise])
  setTimeout(function() {
    abortFn()
  }, timeout)
  return abortablePromise
}

export default fetchTimeout

// src/main.js
import wait from './wait'
import fetchTimeout from './fetchTimeout'

/**
 * 限制并发请求数量的 fetch 封装
 */
class FetchLimiting {
  constructor({ timeout = 10000, limit = 10 }) {
    this.timeout = timeout
    this.limit = limit
    this.execCount = 0
    // 等待队列
    this.waitArr = []
  }

  /**
   * 执行一个请求
   * 如果到达最大并发限制时就进行等待
   * 注:该方法的请求顺序是无序的,与代码里的顺序无关
   * @param {RequestInfo} url 请求 url 信息
   * @param {RequestInit} init 请求的其他可选项
   * @returns {Promise} 如果超时就提前返回 reject, 否则正常返回 fetch 结果
   */
  async _fetch(url, init) {
    const _innerFetch = async () => {
      console.log(
        `执行 execCount: ${this.execCount}, waitArr length: ${
          this.waitArr.length
        }, index: ${JSON.stringify(this.waitArr[0])}`,
      )
      this.execCount++
      const args = this.waitArr.shift(0)
      try {
        return await fetchTimeout(fetch(...args), this.timeout)
      } finally {
        this.execCount--
      }
    }
    this.waitArr.push(arguments)
    await wait(() => this.execCount < this.limit)
    // 尝试启动等待队列
    return _innerFetch()
  }
}

export default FetchLimiting

使用 rollup 直接打包

安装 rollup

npm i rollup -D

在根目录创建一个 rollup.config.js 配置文件

export default {
  // 入口文件
  input: 'src/main.js',
  output: {
    // 打包名称
    name: 'bundlea',
    // 打包的文件
    file: 'dist/bundle.js',
    // 打包的格式,umd 支持 commonjs/amd/life 三种方式
    format: 'umd',
  },
}

添加一个 npm script

"scripts": {
  "build": "rollup -c"
}

然后运行 npm run build 测试打包,可以看到 dist 目录下已经有 bundle.js 文件了

好了,到此为止我们已经简单使用 rollup 打包 js 了,下面的内容都是可选项,如果需要可以分节选读。

使用 babel 转换 ES5

然而,我们虽然已经将 main.js 打包了,然而实际上我们的代码没有发生什么变化。即:原本是 ES6 的代码仍然会是 ES6,而如果我们想要尽可能地支持更多的浏览器,目前而言还是需要兼容到 ES5 才行。

所以,我们需要 babel,它能够帮我们把 ES6 的代码编译成 ES5。

附:babel 被称为现代前端的 jquery。

首先,安装 babel 需要的包

npm i -D rollup-plugin-babel @babel/core @babel/plugin-external-helpers @babel/preset-env

rollup.config.js 中添加 plugins

import babel from 'rollup-plugin-babel'

export default {
  plugins: [
    // 引入 babel 插件
    babel({
      exclude: 'node_modules/**',
    }),
  ],
}

添加 babel 的配置文件 .babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": ["@babel/plugin-external-helpers"]
}

再重新运行 npm run build,可以看到 bundle.js 中的代码已经被编译成 ES5 了。

使用 uglify 压缩生产环境代码

那么,生产中的代码还需要做什么呢?是的,压缩,减小 js 代码的体积是必要的。接下来,我们还需要使用 uglify 压缩我们打包后的 bundle.js 代码。

首先仍然是安装 uglify 相关的包

npm i -D rollup-plugin-uglify

然后在 rollup.config.js 中引入插件就好了

// 注意,这里引入需要使用 { uglify } 而非 uglify,因为 uglify 导出自身时使用的是 exports.uglify
import { uglify } from 'rollup-plugin-uglify'

export default {
  plugins: [
    // js 压缩插件,需要在最后引入
    uglify(),
  ],
}

使用 ESLint 检查代码

如果我们想要需要多人协作统一代码风格,那么可以使用 ESLint 来强制规范。

首先,全局安装 eslint

npm i eslint -g

然后使用 eslint cli 初始化

eslint --init

下面的三项问题选择

  1. How would you like to configure ESLint? (Use arrow keys)
    Use a popular style guide
  2. Which style guide do you want to follow? (Use arrow keys)
    Standard (https://github.com/standard/standard)
  3. What format do you want your config file to be in? (Use arrow keys)
    JavaScript
  4. Would you like to install them now with npm?
    y

然后,我们发现项目根目录下多出了 .eslintrc.js,这是 eslit 的配置文件。然而,我们需要对其稍微修改一下,不然如果我们的代码中出现了浏览器中的对象,例如 document,eslint 就会傻傻的认为那是个错误!
修改后的 .eslintrc.js 配置

module.exports = {
  extends: 'standard',
  // 添加了运行环境设定,设置 browser 为 true
  env: {
    browser: true,
  },
}

当我们查看打包后的 bundle.js 时发现 eslint 给我们报了一堆错误,所以我们需要排除掉 dist 文件夹
添加 .eslintignore 文件

dist

添加 rollup-plugin-eslint 插件,在打包之前进行格式校验

npm i -D rollup-plugin-eslint

然后引入它

import { eslint } from 'rollup-plugin-eslint'

export default {
  plugins: [
    // 引入 eslint 插件
    eslint(),
  ],
}

这个时候,当你运行 npm run build 的时候,eslint 可能提示你一堆代码格式错误,难道我们还要一个个的去修复么?不,eslint 早已考虑到了这一点,我们可以添加一个 npm 脚本用于全局修复格式错误。

"scripts": {
  "lint": "eslint --fix src"
}

然后运行 npm run lint,eslint 会尽可能修复格式错误,如果不能修复,会在控制台打印异常文件的路径,然后我们手动修复就好啦

其他 rollup 配置

添加代码映射文件

其实很简单,只要在 rollup.config.js 启用一个配置就好了

export default {
  output: {
    // 启用代码映射,便于调试之用
    sourcemap: true,
  },
}

多环境打包

首先移除掉根目录下的 rollup.config.js 配置文件,然后创建 build 目录并添加下面四个文件

// build/util.js
import path from 'path'

/**
 * 根据相对路径计算真是的路径
 * 从当前类的文件夹开始计算,这里是 /build
 * @param {String} relaPath 相对路径
 * @returns {String} 绝对路径
 */
export function calcPath(relaPath) {
  return path.resolve(__dirname, relaPath)
}
// build/rollup.config.dev.js
import { eslint } from 'rollup-plugin-eslint'
import { calcPath } from './util'
import { name } from '../package.json'

export default {
  // 入口文件
  input: calcPath('../src/main.js'),
  output: {
    // 打包名称
    name,
    // 打包的文件
    file: calcPath(`../dist/${name}.js`),
    // 打包的格式,umd 支持 commonjs/amd/life 三种方式
    format: 'umd',
    // 启用代码映射,便于调试之用
    sourcemap: true,
  },
  plugins: [
    // 引入 eslint 插件,必须在 babel 之前引入,因为 babel 编译之后的代码未必符合 eslint 规范,eslint 仅针对我们 [原本] 的代码
    eslint(),
  ],
}
// build/rollup.config.prod.js
import babel from 'rollup-plugin-babel'
// 注意,这里引入需要使用 { uglify } 而非 uglify,因为 uglify 导出自身时使用的是 exports.uglify
import { uglify } from 'rollup-plugin-uglify'
import { eslint } from 'rollup-plugin-eslint'
import { calcPath } from './util'
import dev from './rollup.config.dev'
import { name } from '../package.json'

export default [
  dev,
  {
    // 入口文件
    input: calcPath('../src/main.js'),
    output: {
      // 打包名称
      name,
      // 打包的文件
      file: calcPath(`../dist/${name}.min.js`),
      // 打包的格式,umd 支持 commonjs/amd/life 三种方式
      format: 'umd',
    },
    plugins: [
      // 引入 eslint 插件,必须在 babel 之前引入,因为 babel 编译之后的代码未必符合 eslint 规范,eslint 仅针对我们 [原本] 的代码
      eslint(),
      // 引入 babel 插件
      babel({
        exclude: calcPath('../node_modules/**'),
      }),
      // js 压缩插件,需要在最后引入
      uglify(),
    ],
  },
]
// build/rollup.config.js
import dev from './rollup.config.dev'
import prod from './rollup.config.prod'

// 如果当前环境时 production,则使用 prod 配置,否则使用 dev 配置
export default process.env.NODE_ENV === 'production' ? prod : dev

修改 npm 脚本

"scripts": {
  "build:dev": "rollup -c build/rollup.config.js --environment NODE_ENV:development",
  "build:prod": "rollup -c build/rollup.config.js --environment NODE_ENV:production",
  "build": "npm run build:dev && npm run build:prod",
}

那么,关于使用 rollup 打包 JavaScript 的内容就先到这里了,有需要的话后续吾辈还会继续更新的!