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

文章目录

优化配置 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来替换代码，从而导致全局变量没有被定义。使用标签方法的一些缺点是，当标签没有被丢弃时，它会使代码变得更难阅读，而且它不适用于嵌套表达式中的代码。在一个特定的项目中使用哪种方法取决于个人偏好。