用esbuild 编译 typescript

与其他构建工具相比，Esbuild是一个性能更高的捆绑工具。这篇文章将介绍如何设置一个构建脚本来为NPM编译TypeScript项目。
更新于: 2023-03-17 17:03:58

背景

  • 为什么看这个：最近在看 gitlab-ci 相关的东西，发现编译慢
  • 总结：这个在实际项目中(React)，还有待实践，可以先开发一些 typescript 包
  • 速度：真的特别快

大纲

  • 安装
  • 添加 esbuild.config.js <这个名字自己定>
  • 格式配置
  • typing.d.ts 生成
  • 发布到 npm
  • 总结

与其他构建工具相比，Esbuild是一个性能更高的捆绑工具。这篇文章将介绍如何设置一个构建脚本来为NPM编译TypeScript项目。

xmind 流程图

安装

# ts/esbuild 基础包
npm install esbuild typescript --save-dev

基本的 esbuild.config.js

const { build } = require('esbuild')

build({
  entryPoints: ['src/index.ts'],
  outdir: 'dist',
  bundle: true,
})

Esbuild将自动检测到我们正在使用TypeScript并尝试加载tsconfig。json文件（如果可用）。

请注意，tsconfig中设置的任何编译器选项。json将优先于构建选项。

我们需要设置的一个重要选项是外部属性。因为我们要将这个库发布到NPM，所以我们希望从最终的捆绑包中排除任何依赖项。很方便，我们可以使用我们的包装。json文件作为真相的来源：

const { build } = require('esbuild')
const { dependencies, peerDependencies } = require('./package.json')

build({
  entryPoints: ['src/index.ts'],
  outdir: 'dist',
  bundle: true,
  external: Object.keys(dependencies).concat(Object.keys(peerDependencies)),
})

实际项目中: 这一句，推荐用 const {nodeExternalsPlugin} = require('esbuild-node-externals') 代替

添加 scripts

"scripts": {
  "postbuild": "tsc --emitDeclarationOnly",
  "build": "node esbuild.config.js"
},
# 生成 dist 目录
npm run build

配置不同的格式

  • esm: esnext 针对较新的场景，如 import 
  • cjs: commonjs 针对 nodejs 的 require 场景
const { build } = require('esbuild')
const { dependencies, peerDependencies } = require('./package.json')

const shared = {
  entryPoints: ['src/index.ts'],
  bundle: true,
  external: Object.keys(dependencies).concat(Object.keys(peerDependencies)),
}

build({
  ...shared,
  outfile: 'dist/index.js',
})

build({
  ...shared,
  outfile: 'dist/index.esm.js',
  format: 'esm',
})

typing.d.ts 生成

由于Esbuild只能捆绑我们的代码，我们仍然需要生成定义文件。

这将允许图书馆用户使用我们编写的类型。虽然直接使用TypeScript发出多个声明文件相对简单<tsc --emitDeclarationOnly>，但npm dts库帮助我们将类型绑定到一个简洁的文件中

npm install npm-dts --save-dev
const { Generator } = require('npm-dts')

new Generator({
  entry: 'src/index.ts',
  output: 'dist/index.d.ts',
}).generate()

发布前的准备

package.json 里添加如下内容

{
  "module": "dist/index.esm.js",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts"
}

总结

我们研究了Esbuild如何提供一个快速构建系统，在为NPM开发库时，我们可以使用它来编译和绑定TypeScript。

在未来，我想我们会看到一个用Go或Rust等性能语言编写的类型检查器，它将极大地加快我们的工作流程。

 

参考