esbuild 入门

esbuild 是一个快速的 JavaScript 打包器，主要目标是带来构建工具性能的新时代，并在此过程中创建易于使用的现代捆绑器。

esbuild 是一个用 Go 编写的快速而简单的 JavaScript 捆绑包，其主要特点有：

以上是 esbuild 官方对该项目的一些介绍。

本文将介绍 esbuild 的一些基本的用法，如何捆绑 JavaScript 应用程序，包括 TypeScript、图像文件、CSS 等。

安装 esbuild

首先，使用 npm 安装 esbuild：

$ npm i -g esbuild

然后，您可以通过调用 esbuild 命令来验证是否安装成功：

$ esbuild --version
# 0.14.38

如果您不想在全局范围内安装 esbuild，也可以这样做：

$ npm i esbuild

但您必须使用完整路径调用 esbuild：

$ ./node_modules/.bin/esbuild --version
# 0.14.38

使用 esbuild 捆绑 TypeScript

创建一个 main.ts 文件，其中有如下内容：

let message: string = 'Hello esbuild!'
console.log(message)

通过 CLI 捆绑 TypeScript 代码：

$ esbuild main.ts --outfile=output.js --bundle --loader:.ts=ts
  output.js  87b 

Done in 4ms

esbuild 命令接受 main.ts 作为入口，它是应用程序启动的地方。

然后，提供 outfile 选项作为定义输出文件的方法。如果不提供此选项，esbuild 会将结果发送到 stdout。

loader 选项是用于加载 TypeScript 文件扩展名的选项。但是，您可以忽略此选项，因为 esbuild 可以根据文件扩展名决定使用哪个 loader。

通过 bundle 选项，esbuild 将把所有依赖项内联到 output.js 文件中。

运行命令后，将捆绑到 output.js 文件，内容如下：

(() => {
  // main.ts
  var message = "Hello esbuild!";
  console.log(message);
})();

我们来看一下不使用 bundle 选项的情况。

我们更改 main.ts 文件的内容如下：

import { sayHello } from './lib'

SayHello()

在创建 lib.ts 文件，其中编写一个 sayHello 并导出：

export function sayHello() {
  console.log('Hello esbuild!')
}

如果不使用 bundle 选项，esbuild 只会在结果中导入依赖项：

$ esbuild main.ts
import { sayHello } from "./lib";
sayHello();

但如果使用 bundle 选项，esbuild 将在结果中内联 lib.ts 的内容：

$ esbuild main.ts --bundle
(() => {
  // lib.ts
  function sayHello() {
    console.log("Hello esbuild!");
  }

  // main.ts
  sayHello()
})();

使用 bundle 选项，可以将所有代码打包到一个文件中。换句话说，两个文件变成一个文件。

esbuild 命令例子：

esbuild lambda.ts --bundle --minify --sourcemap --platform=node --target=es2020 --outfile=dist/index.js

注：关于 sourcemap可以参考 http://123.57.164.21/?p=9863

92IT