esbuild介绍

vite的核心架构是：node-http服务 + esbuild编译 + rollup打包，所以熟悉esbuild对理解vite的原理有一定的帮助。接下来简单介绍一下esbuild。

ESbuild (opens new window) 是一款基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以快 10~100 倍。

# 1 安装

npm install esbuild

# 2 使用

# 2.1 main.js

console.log('title');

# 2.2 esbuild.js

require('esbuild').buildSync({
  entryPoints: ['main.js'],
  outfile: 'out.js',
})

1
2
3
4

# 3 内容类型

content-types (opens new window)

每个内容类型都有一个关联的加载器，它告诉 esbuild 如何解释文件内容。默认情况下，某些文件扩展名已经为它们配置了加载器，尽管可以覆盖默认值.

# 3.1 main.js

let title = <h1>hello</h1>;
console.log('title');

1
2

# 3.2 esbuild.js

require('esbuild').buildSync({
  entryPoints: ['main.js'],
  bundle: true,
  loader: { '.js': 'jsx' },
  outfile: 'out.js',
})

1
2
3
4
5
6

# 4 plugin

finding-plugins (opens new window)
community-plugins (opens new window)

一个esbuild插件是一个包含name和setup函数的对象
它们以数组的形式传递给构建API调用,setup函数在每次BUILD API调用时都会运行一次

# 4.1 命名空间

每个模块都有一个关联的命名空间。默认情况下，esbuild 在file命名空间中运行，该命名空间对应于文件系统上的文件
但是 esbuild 也可以处理在文件系统上没有对应位置的“虚拟”模块
插件可用于创建虚拟模块。虚拟模块通常使用命名空间而不是file将它们与文件系统模块区分开来,通常命名空间特定于创建它们的插件

提示

虚拟模块指的是不是硬盘上真实存在的模块，例如像运行时的process.env，一些自定义的对象等。

# 4.2 过滤器

每个回调都必须提供一个正则表达式作为过滤器。当路径与其过滤器不匹配时，esbuild 使用它来跳过调用回调
命名空间也可用于过滤。回调必须提供过滤正则表达式，但也可以选择提供命名空间以进一步限制匹配的路径

# 4.3 Resolve回调

使用添加的回调onResolve将在 esbuild 构建的每个模块中的每个导入路径上运行
回调可以自定义 esbuild 如何进行路径解析。例如，它可以拦截导入路径并将它们重定向到其他地方。它还可以将路径标记为外部
回调可以返回而不提供将路径解析的责任传递给下一个回调的路径。对于给定的导入路径，onResolve所有插件的所有回调都将按照它们注册的顺序运行，直到有人负责路径解析。如果没有回调返回路径，esbuild 将运行其默认路径解析逻辑

# 4.4 Resolve参数

当 esbuild 调用由注册的回调时onResolve，它将为这些参数提供有关导入路径的信息：
path 这是来自底层模块源代码的逐字未解析路径
namespace 这是包含要解析的此导入的模块的名称空间

# 4.5 onLoad回调

onLoad将为每个未标记为外部的唯一路径/命名空间对运行添加的回调
它的工作是返回模块的内容并告诉 esbuild 如何解释它
回调可以在不提供模块内容的情况下返回。在这种情况下，加载模块的责任被传递给下一个注册的回调。对于给定的模块，onLoad所有插件的所有回调都将按照它们注册的顺序运行，直到有人负责加载模块。如果没有回调返回模块的内容，esbuild 将运行其默认的模块加载逻辑

# 4.6 onLoad选项

filter 每个回调都必须提供一个过滤器，它是一个正则表达式。当路径与此过滤器不匹配时，将跳过注册的回调
namespace 这是可选的。如果提供，回调仅在提供的命名空间中的模块内的路径上运行

# 4.7 load结果

contents 将此设置为字符串以指定模块的内容。如果设置了此项，则不会针对此已解析路径运行更多加载回调。如果未设置，esbuild 将继续运行在当前回调之后注册的加载回调。然后，如果内容仍未设置，如果解析的路径在file命名空间中，esbuild 将默认从文件系统加载内容
loader 这告诉 esbuild 如何解释内容。例如，js加载器将内容解释为 JavaScript，css加载器将内容解释为 CSS。js如果未指定，则加载程序默认为。有关所有内置加载程序的完整列表，请参阅内容类型页面。

# 5 env插件实战

# 5.1 entry.js

import { PATH } from 'env'
console.log(`PATH is ${PATH}`)

1
2

# 5.2 envPlugin

let envPlugin = {
  name: 'env',
  setup(build) {
    // 拦截名为env的导入路径，以便esbuild不会尝试将它们映射到文件系统位置
    // 用env-ns名称空间标记它们，以便为该插件保留，后面的插件可以对这个命名空间进行处理  esbuild默认的命名空间是 file
    build.onResolve({ filter: /^env$/ }, args => ({
      path: args.path,
      namespace: 'env-ns',
    }))
    // 加载带有env-ns名称空间标记的路径，它们的行为就像指向包含环境变量的JSON文件一样
    build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
      contents: JSON.stringify(process.env), // 用于指定模块的内容, 如果设置此属性,后面的onLoad钩子和默认读取钩子就不走了
      loader: 'json' // 指定加载器 这里指 JSON.parse()
    }))
  },
}

require('esbuild').build({
  entryPoints: ['entry.js'],
  bundle: true,
  outfile: 'out.js',
  plugins: [envPlugin],
}).catch(() => process.exit(1))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

编辑

#esbuild

上次更新: 2022/05/23, 15:08:15

← vite基本用法和项目实践 vite核心原理→