esbuild中文文档-语法转换（Transformation - Supported、Target）
文章目录
- 语法转换 Transformation
-
- 配置支持的语法 Supported
- 构建目标 Target
- 结语
哈喽，大家好！我是「励志前端小黑哥」，我带着最新发布的文章又来了！
老规矩，小手动起来~点赞关注不迷路！
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中文文档专栏，本人目前正在翻译整理，关注我，有最新的翻译文档会第一时间通知你！
（本文完）
励志前端小黑哥，全网唯一账号！
关注我，带你了解更多前端知识！