esbuild中文文档-Input配置项（Input - Entry points、Loader、Stdin）
文章目录
- Input配置项
-
- 入口点 Entry points
- 加载器 Loader
- 控制台输入 Stdin
- 结语
哈喽，大家好！我是「励志前端小黑哥」，我带着最新发布的文章又来了！
老规矩，小手动起来~点赞关注不迷路！
esbuild简单介绍
esbuild为了突破了JavaScript语言的瓶颈，采用了Go语言编写，构建速度与同代码量下的webpack对比提升在10倍以上，开创了构建工具性能的新时代。
它的中文文档，本人正在不断的更新完善中，欢迎大家关注阅读！
Input配置项
入口点 Entry points
Supported by: Build
这个配置是一个文件数组，每个文件都作为打包算法的输入。它们被称为“入口点”，因为每个入口点都被认为是初始脚本，然后加载它所关联的其他所有代码。您不需要在页面中加载带有＜script＞标记的许多库，而是使用import语句将它们导入到您的入口点（或导入到另一个文件中，然后导入到入口点）。
简单的应用程序只需要一个入口点，但如果存在多个逻辑独立的代码组（如主线程和辅助线程），或者应用程序具有单独的相对不相关的区域（如登录页、编辑器页和设置页），则额外的入口点可能会很有用。单独的入口点有助于关注点的分离，并有助于减少浏览器需要下载的不必要的代码量。如果适用，启用代码拆分code splitting可以在浏览到第二页面时进一步减小下载大小，第二页面的入口点与已经访问的第一页面共享一些已经下载的代码。
指定入口点最简单的方法是只传递一组文件路径：
esbuild home.ts settings.ts --bundle --outdir=out
这将生成两个输出文件，out/home.js和out/settings.js，对应两个入口点home.ts和settings.ts。
为了进一步控制输出文件的路径是如何从相应的输入入口点生成的，您还应该关注以下配置项：
- Entry names
- Out extension
- Outbase
- Outdir
- Outfile
此外，您还可以为每个单独的入口点指定一个完全自定义的输出路径：
esbuild out1=home.ts out2=settings.ts --bundle --outdir=out
这将生成两个输出文件，out/out1.js和out/out2.js，分别对应于home.ts和settings.ts这两个入口点。
加载器 Loader
Supported by: Build and Transform
此配置项可更改对给定输入文件的解释方式。例如，js loader将文件解释为JavaScript，css loader将文件解释为css。有关所有内置加载程序的完整列表，请参阅内容类型页面。
为给定的文件类型配置loader后，可以使用import语句或require调用加载该文件类型。例如，将.png文件扩展名配置为使用data URL loader意味着导入.png文件时，将为您提供包含该图像内容的data URL：
import url from './example.png'
let image = new Image
image.src = url
document.body.appendChild(image)
import svg from './example.svg'
let doc = new DOMParser().parseFromString(svg, 'application/xml')
let node = document.importNode(doc.documentElement, true)
document.body.appendChild(node)
上面的代码可以使用build API调用进行打包，如下所示：
esbuild app.js --bundle --loader:.png=dataurl --loader:.svg=text
如果使用来自stdin的输入的build API，必须以另一个方式设置此配置项，因为stdin没有文件扩展名。使用build API为stdin配置loader 如下所示：
echo 'import-pkg=require（“./pkg”）' | esbuild --loader=ts --bundle
transform API调用只需要一个加载器，因为它不涉及与文件系统的交互，因此不涉及文件扩展名。为转换API配置加载器（在本例中为ts loader）如下所示：
$ echo 'let x: number = 1' | esbuild --loader=ts
# 转换结果
let x = 1;
控制台输入 Stdin
Supported by: Build
通常，build API采用一个或多个文件名作为输入。然而，stdin配置项可在文件系统上根本不存在模块的情况下运行build。它被称为“stdin”，因为它对应于在命令行上将文件管道连接到stdin。
除了指定stdin文件的内容外，您还可以选择指定解析目录（用于确定相对导入的位置）、源文件sourcefile（在错误消息和源映射中使用的文件名）和加载器loader（用于确定如何解释文件内容）。CLI工具无法指定解析目录，它会自动设置为当前工作目录。
以下是如何使用此功能：
echo 'export * from "./another-file"' | esbuild --bundle --sourcefile=imaginary-file.js --loader=ts --format=cjs
结语
笔者根据esbuild文档搭建了一套简洁的ts开发脚手架工程，编译速度非常快！脚手架还整合了eslint，另一篇文章还附带了调试教程，需要的朋友看这里：esbuild配合vscode搭建的ts开发环境，这编译速度，真香
另外，esbuild中文文档专栏，本人目前正在翻译整理，关注我，有最新的翻译文档会第一时间通知你！
（本文完）
励志前端小黑哥，全网唯一账号！
关注我，带你了解更多前端知识！