用 rollup 和 babel 构建 js 工具包并自动发布

起

起源是我写了一个名叫 escher-canvas 的 canvas 2d 绘图工具库，这个库本身使用 class 语法写的，如果不经过 babel 转译，下载使用时有可能会在继承内部对象时出现下面的错误：

import { EscherBaseObject } from "escher-canvas"
class Trangle extends EscherBaseObject {
  constructor(props) {
    super(props)
    this.x = 1
  }
}
let t = new Trangle()

// !!! ERROR: Class constructor EscherBaseObject cannot be invoked without 'new'

这个错误本身比较隐蔽，并且无法被 yarn link 本地引用时复现，令人头疼。我的本意是不想支持老语法的，直接放出源代码不做任何压缩和转译，就用 class 语法，如果浏览器环境不让用就不让用好了，还能方便使用者阅读代码。

然而，即使在一般的 cra 项目中不会报错，gatsby 却不肯放过它，原因是 gatsby 本身是服务端渲染的，因此需要支持 node 环境，并且浏览器 api 受到一些限制，我暂时没有找到绕过去的方法，最终只得做这个兼容，为了最低限度地去写这些代码并且利于维护，就将配置记录在这里，这可能也是最简单的 rollup 分享了。

最终，确定下来的需求就是两个：

让代码被编译成大部分浏览器都可以执行的 .js 文件
尽可能让编译过程简单、自动化

写依赖文件

依赖文件一定要足够简单，很多动辄 eject 的 webpack 教程就是在害人，对于一个我的工具库来说，并不需要用到 webpack，轻装上阵、易于修改是最好的，最终选了 rollup 来做这个事。

需要在项目根目录下编写这样一个 babel 配置文件：

// .babelrc
{ "presets": ["@babel/preset-env"] }

和一个最核心的 rollup 配置文件：

// rollup.config.js
import babel from 'rollup-plugin-babel'

export default {
  input: 'src/index.js', // 入口文件
  output: {
    file: 'dist/bundle.js', // 产物文件
    format: 'cjs', // 只需要支持 node 环境就好了
  },
  plugins: [
    babel({
      exclude: 'node_modules/**',
    }),
  ],
}

并且在 package.json 文件中添加一个命令

// package.json
{
  "scripts": {
    "build": "rollup -c" // 表示读取 config 文件
  },
  // 下面是 4 个必要依赖 install 时记得加上 -D 参数
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@babel/preset-env": "^7.18.2",
    "rollup": "^2.75.3",
    "rollup-plugin-babel": "^4.4.0"
  }
}

devDependencies 写上自动安装或者手动安装都行，安装完毕之后执行 yarn build 即可。

自动化

自动化通过 github action 完成，可以查看对应文档。这里不再赘述。