esbuild中文文档-输出文件位置配置项（Output location - Allow overwrite、Asset names、Chunk names、Entry names）

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

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

esbuild简单介绍

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

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

Output location 配置项

允许覆盖 Allow overwrite

Supported by: Build

启用此设置可以允许输出文件覆盖输入文件。默认情况下不会启用它，因为这样做意味着会覆盖源代码，如果代码未提交仓库，可能会导致数据丢失。但支持它可以避免临时目录的需要，从而使某些工作流更容易。因此，当您想要故意覆盖源代码时，可以启用此功能：

esbuild app.js --outdir=. --allow-overwrite

资源名称 Asset names

Supported by: Build

当loader设置为file时，此配置项可以控制生成输出文件的文件名。它使用一个带有占位符的模板来配置输出路径，当生成输出路径时，占位符将被特定的值替换。例如，指定assets/[name]-[hash]的资源名称模板会将所有资源放入输出目录名为assets的子目录中，并在文件名中包含资源的内容哈希值。你可以这样进行配置：

esbuild app.js --asset-names=assets/[name]-[hash] --loader:.png=file --bundle --outdir=out

资源路径模板中可以使用四个占位符：

• [dir]

这是从包含资源文件的目录到outbase目录的相对路径。其目的是通过将输入目录结构镜像生成到输出目录中，让资源输出路径看起来更美观。

• [name]

这是不带扩展名的资源的原始文件名。例如，如果资源的原始名为image.png，那么模板中的[name]将被image替换。没有必要单独使用此占位符；它的存在只是为了让人辨识，使调试更容易。

• [hash]

这是资源的内容哈希，有助于避免名称冲突。例如，您的代码可能会导入components/button/icon.png和components/select/icon.png，在这种情况下，您需要散列来区分两个都命名为icon的资源。

• [ext]

这是资源的文件扩展名（即最后一个.字符结束后的所有内容）。它可以用于将不同类型的资源放入不同的目录中。例如，--asset-names=assets/[ext]/[name]-[hash]可以将名为image.png的资源生成到assets/png/image-CQFGD2NG.png。

资源路径的模板不需要包含文件扩展名。模板替换后，资源的原始文件扩展名将自动添加到输出路径的末尾。

这个配置项的规则也同样适用于Chunk names和Entry names。

分片名称 Chunk names

Supported by: Build

此配置项可以控制启用代码拆分时自动生成的共享代码块的文件名。它使用一个带有占位符的模板来配置输出路径，当生成输出路径时，占位符将被特定的值替换。例如，指定chunks/[name]-[hash]的chunk模板会将所有生成的chunk放入输出目录中名为chunks的子目录中，并在文件名中包含chunk的内容哈希。你可以这样设置：

esbuild app.js --chunk-names=chunks/[name]-[hash] --bundle --outdir=out --splitting --format=esm

名称模板支持三个选项：[name]、[hash]、[ext]，含义与上一小节一样。

chunk路径模板不需要包含文件扩展名。模板替换后，为文件配置out extension后将自动添加到输出路径的末尾。

请注意，此配置项只控制自动生成的共享代码块的名称。它不控制与入口点相关的输出文件的名称。这些文件的名称是根据原始入口点文件相对于outbase配置的目录路径确定的，并且这个行为是不能更改的。以后的版本会添加一个API选项，用于更改入口点输出文件的文件名。

入口名称 Entry names

Supported by: Build

此选项可以控制每个入口点文件相对应的输出文件的文件名。它使用一个带有占位符的模板来配置输出路径，当生成输出路径时，占位符将被特定的值替换。例如，指定一个条目名模板[dir]/[name]-[hash]会在文件名中包含输出文件的哈希，并将文件放入输出目录中，可能位于子目录下。这样做：

esbuild src/main-app/app.js --entry-names=[dir]/[name]-[hash] --outbase=src --bundle --outdir=out

名称模板支持四个选项：[dir]、[name]、[hash]、[ext]，含义与上一小节一样。

[dir]选项的举例，如果有两个入口点src/pages/home/index.ts和src/pages/sabout/index.ts，输出目录是src，入口名称模板是[dir]/[name]，则输出目录将包含pages/homeindex.js和pages/about/index.js。如果入口名称模板只是[name]，打包会失败，因为在输出目录中会有两个输出文件具有相同的输出路径index.js。

结语

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

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

（本文完）

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