esbuild中文文档-输出内容配置项（Output contents - Banner、Charset、Footer）

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

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

esbuild简单介绍

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

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

Output contents配置项

横幅 Banner

Supported by: Build

使用此配置项可以在构建后的JavaScript和CSS文件的开头插入任意字符串。这通常用于插入注释：

esbuild app.js --banner:js=//comment --banner:css=/*comment*/
1

这个功能跟页脚footer配置项类似，但页脚是在末尾而不是开头追加。

请注意，如果您在CSS文件中插入非注释代码，请注意CSS会忽略非导入规则（@charset规则除外）之后的所有@import，因此使用横幅插入CSS规则可能会意外禁用外部样式表的导入。

字符集设置 Charset

Supported by: Build and Transform

默认情况下，esbuild的输出仅为ASCII。任何非ASCII字符都使用反斜杠转义序列进行转义。其中一个原因是浏览器默认情况下会误解非ASCII字符，从而导致混乱。您必须在HTML中显式添加，或者为其提供正确的Content-Type响应头，以使浏览器不会损坏代码。另一个原因是非ASCII字符会显著降低浏览器的解析器速度。但是，使用转义序列会使构建的输出文件偏大，会使阅读变得更加困难。

如果您希望esbuild在不使用转义序列的情况下打印原始字符，并且您已经确保浏览器将代码解释为UTF-8，则可以通过设置字符集来禁用字符转义：

$ echo 'let π = Math.PI' | esbuild
let \u03C0 = Math.PI;

$ echo 'let π = Math.PI' | esbuild --charset=utf8
let π = Math.PI;
1
2
3
4
5

一些注意事项：

• 这个配置项不能转义正则表达式中的非ASCII字符。这是因为esbuild当前根本不解析正则表达式的内容。虽然有此限制，但esbuild还是添加了该配置项，因为它对不包含此类情况的代码仍然有用。

• 此配置项不适用于注释。我认为在注释中保留非ASCII数据应该是可以的，因为即使编码错误，运行时环境也会完全忽略所有注释的内容。而且，esbuild会删除被许可的注释之外的所有注释。

• 此配置项同时适用于所有输出文件类型（JavaScript、CSS和JSON）。因此，如果您将web服务器配置为发送正确的Content-Type头，并希望使用UTF-8字符集，请确保您的web服务器已配置为将.js和.css文件都视为UTF-8编码。

结语

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

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

（本文完）

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