在 esbuild 中实现 Babel 超人气爆款插件

前端

2023-11-23 11:30:21

前言

esbuild 是近些天来非常火的一个全新的工具，年前霸屏掘金前端板块，被称作第三代构建方案，它最与众不同之处就是它独特的使用 go 语言构建。得益于此，它的打包速度非常的惊人。

构建十次 three.min.js，耗时：

esbuild：280 毫秒
webpack：2700 毫秒
rollup：11200 毫秒

不仅如此，它还支持 TypeScript、JSX、LESS、SASS 等等。在刚发布的时候，我们就进行过全面的评测，感兴趣的同学可以了解下：你值得拥有的前端构建新利器。

esbuild 是一个非常棒的构建工具，但是它不支持 Babel 插件。Babel 插件是一个非常强大的工具，它可以帮助我们做很多事情，比如：

转译新版本的 JavaScript 代码为旧版本的 JavaScript 代码
添加 polyfill
添加代码注释
代码压缩

等等。

如果没有 Babel 插件，我们就无法使用这些功能。那么，如何在 esbuild 中实现 Babel 插件呢？

实现方案

1. 使用 esbuild-plugin-babel 插件

esbuild-plugin-babel 是一个可以将 Babel 插件集成到 esbuild 中的插件。该插件的使用非常简单，我们只需要在 esbuild 的配置文件中添加如下代码即可：

// esbuild.js
const { build } = require('esbuild');

build({
  entryPoints: ['src/index.js'],
  outfile: 'dist/index.js',
  plugins: [
    require('esbuild-plugin-babel')(),
  ],
});

添加了 esbuild-plugin-babel 插件之后，我们就可以在 esbuild 的构建过程中使用 Babel 插件了。

2. 使用自定义 Babel 插件

如果我们想使用自定义的 Babel 插件，则需要自己编写一个 esbuild 插件。我们可以通过继承 esbuild.Plugin 类来编写 esbuild 插件。

// babel-plugin.js
const { Plugin } = require('esbuild');

class BabelPlugin extends Plugin {
  constructor(options) {
    super();
    this.options = options;
  }

  setup(build) {
    // 在这里编写 Babel 插件的逻辑
  }
}

module.exports = BabelPlugin;

编写好 esbuild 插件之后，我们就可以在 esbuild 的配置文件中添加如下代码来使用该插件：

// esbuild.js
const { build } = require('esbuild');
const BabelPlugin = require('./babel-plugin.js');

build({
  entryPoints: ['src/index.js'],
  outfile: 'dist/index.js',
  plugins: [
    new BabelPlugin({
      // 在这里配置 Babel 插件的选项
    }),
  ],
});