哈喽，大家好！我是「励志前端小黑哥」，我带着最新发布的文章又来了！

老规矩，小手动起来~点赞关注不迷路！

esbuild简单介绍

esbuild为了突破JavaScript语言的瓶颈，采用了Go语言编写，构建速度与同代码量下的webpack对比提升在10倍以上，开创了构建工具性能的新时代。

它的中文文档，本人正在不断的更新完善中，欢迎大家关注阅读！

语法转换 Transformation

配置支持的语法 Supported

Supported by: Build and Transform

通过此设置，您可以在单个语法功能级别自定义esbuild的一组不受支持的语法功能。例如，您可以使用它来告诉esbuild不支持BigInt，这样esbuild在尝试使用BigInt时就会生成错误。通常，这是在您使用target配置时自动为您配置的，您通常应该使用target配置而不是此配置。如果除此配置外还指定了target，则此设置将覆盖target指定的内容。

以下是一些示例，说明为什么您可能希望使用此设置而不是设置target，或者除了设置target之外：

• JavaScript运行时通常会快速实现较新的语法功能，其速度比等效的旧JavaScript慢，您可以通过告诉esbuild不支持这些语法功能来加快速度。例如，V8有一个关于对象扩展的性能缺陷long-standing performance bug regarding object spread，你可以通过手动复制属性而不使用对象扩展语法来避免它。

• 除了esbuild的target设置可以识别的JavaScript实现之外，还有许多其他JavaScript实现，esbuild可能不支持某些功能。如果您的target实现了这样的一个不支持的功能，则可以使用此设置使用自定义语法兼容这个功能呢，而无需更改esbuild本身。例如，TypeScript的JavaScript解析器可能不支持任意模块命名空间标识符名称，因此您可能希望在针对TypeScript的JavaScript解析器时关闭这些命名空间标识符。

• 您可能正在使用另一个工具处理esbuild的输出，并且您可能希望esbuild转换某些功能，而另一工具转换某些其他功能。例如，如果您使用esbuild将文件单独转换为ES5，但随后将输出馈送到Webpack中进行打包，则可能需要保留import()表达式，即使它们在ES5中会报错。

如果您希望esbuild认为某个语法功能不受支持，可以这样指定：

esbuild app.js --supported:bigint=false

语法功能是使用特定于esbuild的功能名称指定的。完整的功能名称如下所示：

JavaScript:

arbitrary-module-namespace-names
array-spread
arrow
async-await
async-generator
bigint
class
class-field
class-private-accessor
class-private-brand-check
class-private-field
class-private-method
class-private-static-accessor
class-private-static-field
class-private-static-method
class-static-blocks
class-static-field
const-and-let
decorators
default-argument
destructuring
dynamic-import
exponent-operator
export-star-as
for-await
for-of
function-or-class-property-access
generator
hashbang
import-assertions
import-meta
inline-script
logical-assignment
nested-rest-binding
new-target
node-colon-prefix-import
node-colon-prefix-require
nullish-coalescing
object-accessors
object-extensions
object-rest-spread
optional-catch-binding
optional-chain
regexp-dot-all-flag
regexp-lookbehind-assertions
regexp-match-indices
regexp-named-capture-groups
regexp-set-notation
regexp-sticky-and-unicode-flags
regexp-unicode-property-escapes
rest-argument
template-literal
top-level-await
typeof-exotic-object-is-object
unicode-escapes
using

CSS:

hex-rgba
inline-style
inset-property
is-pseudo-class
modern-rgb-hsl
nesting
rebecca-purple

构建目标 Target

Supported by: Build and Transform

这个配置为生成的JavaScript和CSS代码设置了目标环境。它告诉esbuild将对这些环境来说太新的JavaScript语法转换为在这些环境中生效的旧的JavaScript语法。例如??运算符是在Chrome80中引入的，所以esbuild在针对Chrome79或更早版本时会将其转换为等效的（但更详细）条件表达式。

请注意，这只涉及语法功能，而不是API。它不会自动为这些环境未使用的新API添加polyfill。您必须为所需的API显式导入polyfill（例如，导入core-js）。自动polyfill注入不在esbuild的范围内。

每个目标环境都是一个环境名称，后跟一个版本号。当前支持以下环境名称：

• chrome
• deno
• edge
• firefox
• hermes
• ie
• ios
• node
• opera
• rhino
• safari

此外，您还可以指定诸如es2020之类的JavaScript语言版本。默认目标是esnext，这意味着默认情况下，esbuild将假定所有最新的JavaScript和CSS功能都得到支持。下面是一个配置多个目标环境的示例。您不需要指定所有这些；您可以指定项目关心的目标环境的子集。如果您愿意，您也可以更精确地指定版本号（例如node12.19.0，而不仅仅是node12）：

esbuild app.js --target=es2020,chrome58,edge16,firefox57,node12,safari11

有关在哪些语言版本中引入了哪些语法功能的详细信息，可以参考JavaScript loader文档。请记住，虽然像es2020这样的JavaScript语言版本是按年份确定的，但仅仅是规范批准的年份。这与所有主要浏览器实现该规范的年份无关，而该规范的提出时间通常在该年之前或之后。

如果您使用了esbuild还不支持转换为当前语言目标的语法功能，那么在使用不支持的语法时，esbuild将生成一个错误。例如，在针对es5语言版本时经常会出现这种情况，因为esbuild只支持将大多数较新的JavaScript语法功能转换为es6。

如果除了target提供的功能之外，还需要在单个功能级别自定义一组受支持的语法功能，或者替换不需要自定义目标提供的语法功能，你可以使用supported进行配置。

结语

笔者根据esbuild文档搭建了一套简洁的ts开发脚手架工程，编译速度非常快！脚手架还整合了eslint，另一篇文章还附带了调试教程，需要的朋友看这里：esbuild配合vscode搭建的ts开发环境，这编译速度，真香

另外，esbuild中文文档专栏，本人目前正在翻译整理，关注我，有最新的翻译文档会第一时间通知你！

（本文完）

励志前端小黑哥，全网唯一账号！
关注我，带你了解更多前端知识！