esbuild中文文档-语法转换（Optimization - Define、Drop、Drop labels）

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

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

esbuild简单介绍

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

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

优化配置 Optimization

Define

Supported by: Build and Transform

此功能提供了一种用常量表达式替换全局标识符的方法。它可以在不更改代码本身的情况下，在构建过程中更改某些代码的行为：

$ echo 'hooks = DEBUG && require("hooks")' | esbuild --define:DEBUG=true
hooks = require("hooks");

$ echo 'hooks = DEBUG && require("hooks")' | esbuild --define:DEBUG=false
hooks = false;

每个define条目都将标识符映射到包含表达式的代码字符串。字符串中的表达式必须是JSON对象（null、boolean、数字、字符串、数组或对象）或单个标识符。数组和对象以外的替换表达式是内联替换的，这意味着它们可以参与常量折叠。数组和对象替换表达式存储在变量中，然后使用标识符引用，而不是内联替换，这避免了替换值的重复副本，但意味着值不参与常量折叠。

如果您想用字符串文字替换某些内容，请记住，传递给esbuild的替换值本身必须包含引号，因为每个定义条目都映射到一个包含代码的字符串。省略引号意味着替换值是一个标识符。下面的示例演示了这一点：

$ echo 'id, str' | esbuild --define:id=text --define:str=\"text\"
text, "text";

如果您使用的是CLI，请记住，不同的shell对于如何转义双引号字符有不同的规则（当替换值是字符串时，这是必要的）。使用\“反斜杠转义，因为它在bash和Windows命令提示符下都有效。其他在bash中有效的转义双引号的方法（如用单引号括起来）在Windows上不起作用，因为Windows命令提示符不会删除单引号。当从package.json文件中的npm脚本使用CLI时，这一点很重要，因为我们希望它在所有平台上都能使用：

{
  "scripts": {
    "build": "esbuild --define:process.env.NODE_ENV=\\\"production\\\" app.js"
  }
}

如果您仍然在不同的shell中遇到跨平台转义问题，您可能需要改用JavaScript API。在那里，您可以使用常规的JavaScript语法来消除跨平台的差异。

如果您正在寻找一种更高级的define功能，它可以用常数以外的东西来替换表达式（例如，用填充码shim替换全局变量），那么您可以使用类似的注入功能inject来实现这一点。

Drop

Supported by: Build and Transform

这个命令告诉esbuild在生成之前编辑源代码以删除某些结构体。目前有两种可能被丢弃的东西：

• debugger

传递此标志将从输出中删除所有debugger语句。这类似于流行的UglifyJS和Terser JavaScript minifiers程序中的drop_debug:true标志。

JavaScript的debugger语句使活动调试器将该语句视为自动配置的断点。当调试器打开时，包含此语句的代码将自动暂停。如果没有打开任何调试器，则该语句将不执行任何操作。从代码中删除这些语句只会防止调试器在代码运行时自动停止。

您可以像这样删除调试器语句：

esbuild app.js --drop:debugger

• console

传递此标志将从输出中删除所有控制台的API调用。这类似于流行的UglifyJS和Terser JavaScript minifiers程序中的drop_console:true标志。

警告：使用此标志可能会在代码中引入错误！此标志将删除包括所有调用参数在内的整个调用表达式。如果这些参数中的任何一个有重要的副作用，那么使用此标志将更改代码的行为。使用此标志时要非常小心。

如果你想删除控制台API调用而不删除有副作用的参数（这样你就不会引入bug），你应该将相关的API调用标记为纯调用。例如，您可以使用--pure:console.log将console.log标记为纯函数调用。这可以在启用压缩时安全地删除这些API调用。

删除控制台API调用，如下所示：

esbuild app.js --drop:console

Drop labels

Supported by: Build and Transform

此配置项会告诉esbuild在生成编辑源代码之前，删除具有特定标签名称的标签语句labeled statements。例如，考虑以下代码：

function example() {
  DEV: doAnExpensiveCheck()
  return normalCodePath()
}

如果使用此选项删除所有名为DEV的标签，那么esbuild将为您提供以下信息：

function example() {
  return normalCodePath();
}

您可以这样配置此功能（比如删除DEV和TEST标签）：

esbuild app.js --drop-labels=DEV,TEST

请注意，这并不是删除代码的唯一方法。另一种更常见的方法是使用define功能将特定的全局变量替换为布尔值。例如，考虑以下代码：

function example() {
  DEV && doAnExpensiveCheck()
  return normalCodePath()
}

如果您将DEV定义为false，那么esbuild将为您提供以下信息：

function example() {
  return normalCodePath();
}

这和使用标签label功能差不多。然而，使用标签而不是全局变量来有条件地删除代码的一个优点是，您不必担心因为有人忘记配置esbuild来替换代码，从而导致全局变量没有被定义。使用标签方法的一些缺点是，当标签没有被丢弃时，它会使代码变得更难阅读，而且它不适用于嵌套表达式中的代码。在一个特定的项目中使用哪种方法取决于个人偏好。

结语

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

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

（本文完）

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