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

文章目录

  • [Output contents配置项](#Output contents配置项)
    • [横幅 Banner](#横幅 Banner)
    • [字符集设置 Charset](#字符集设置 Charset)
  • 结语

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

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

esbuild简单介绍

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

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

Output contents配置项

Supported by: Build

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

shell 复制代码
esbuild app.js --banner:js=//comment --banner:css=/*comment*/

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

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

字符集设置 Charset

Supported by: Build and Transform

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

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

shell 复制代码
$ echo 'let π = Math.PI' | esbuild
let \u03C0 = Math.PI;

$ echo 'let π = Math.PI' | esbuild --charset=utf8
let π = Math.PI;

一些注意事项:

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

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

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

结语

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

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

(本文完)

励志前端小黑哥,全网唯一账号!

关注我,带你了解更多前端知识!

相关推荐
止观止2 分钟前
深入学习前端 Proxy 和 Reflect:现代 JavaScript 元编程核心
前端·javascript·学习
ChongYu重玉4 分钟前
【node/vue】css制作可3D旋转倾斜的图片,朝向鼠标
javascript·css·vue.js·经验分享·笔记·node.js·vue
薛定谔的算法9 分钟前
猜你想不到SPA相比于传统页面的6个特点
前端·javascript·react.js
3Katrina15 分钟前
《解锁现代Web开发:SPA核心原理与性能优化实战》
前端·javascript
Attacking-Coder23 分钟前
前端面试宝典---项目难点2-智能问答对话框采用虚拟列表动态渲染可视区域元素(10万+条数据)
开发语言·前端·javascript
kirinlau27 分钟前
JavaScript中Object.defineProperty的作用和用法以及和proxy的区别
javascript·ecmascript
Adolf_199337 分钟前
axios拦截器
前端·javascript
一一一8711 小时前
JavaScript 中的 this:谁在调用我?
javascript
多啦C梦a1 小时前
《ProtectRoute怎么用?》 前端登录拦截器!React ProtectRoute + 懒加载,从入门到会用
前端·javascript·react.js
AliciaIr1 小时前
JavaScript事件循环机制:从底层原理到幽默解读
javascript