esbuild中文文档-输出文件位置配置项（Output location - Out extension、Outbase、Outdir、Outfile、Public path、Write）

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

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

esbuild简单介绍

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

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

Output location配置项

输出的扩展名 Out extension

Supported by: Build

此选项允许您将esbuild生成文件的文件扩展名自定义为.js或.css以外的文件。特别是.mjs和.cjs文件扩展名在node中具有特殊含义（它们分别表示ESM和CommonJS格式的文件）。如果需要使用esbuild生成多个文件，这个配置项会非常有用，这个时候你必须使用outdir替换outfile选项。您可以这样使用它：

esbuild app.js --bundle --outdir=dist --out-extension:.js=.mjs

Outbase

Supported by: Build

如果您的构建在不同的目录中包含多个入口点，则目录结构将被复制到相对于内部版本目录的输出目录中。例如，如果有两个入口点src/pages/home/index.ts和src/pages/about/index.ts，并且输出目录是src，那么输出目录将包含pages/home/index.js和pages/about/index.js。下面是这个场景的例子：

esbuild src/pages/home/index.ts src/pages/about/index.ts --bundle --outdir=out --outbase=src

如果未指定outbase目录，则默认为所有输入入口点路径中最低的公共祖先目录。这是上面例子中的src/pages，这意味着输出目录会少了pages这一层，仅包含home/index.js和about/index.js。

Outdir

Supported by: Build

此选项设置build后的输出目录。例如，此命令将生成一个名为out目录：

esbuild app.js --bundle --outdir=out

如果输出目录不存在，则会创建它，但如果它已经包含一些文件，是不会清除它的。任何生成的文件都将以静默方式覆盖具有相同名称的现有文件。如果希望输出目录仅包含当前运行的esbuild中的文件，则应在运行esbuild之前自行清除输出目录。

如果您的构建在不同的目录中包含多个入口点，则目录结构将从所有输入入口点路径中最低的公共祖先目录开始复制到输出目录中。例如，如果有两个入口点src/home/index.ts和src/about/index.ts，输出目录将包含home/index.js和about/index.js。如果你想自定义这种行为，你应该更改outbase目录。

Outfile

Supported by: Build

此选项设置build后的输出文件名。这仅适用于只有一个入口点的情况。如果有多个入口点，则必须使用outdir选项来指定输出目录。使用outfile如下所示：

esbuild app.js --bundle --outfile=out.js

Public path

Supported by: Build

这个配置与external file loader结合使用非常有用。默认情况下，加载器使用默认导出将导入文件的名称导出为字符串。public path选项允许您为该loader加载的每个文件的导出字符串预先设置一个基础路径：

esbuild app.js --bundle --loader:.png=file --public-path=https://www.example.com/v1 --outdir=out

Write

Supported by: Build

build API可以直接写入文件系统，也可以返回内存缓冲区中的文件。默认情况下，CLI和JavaScript API会写入文件系统，而Go API不会写入。要使用内存中的缓冲区：

import * as esbuild from 'esbuild'

let result = await esbuild.build({
  entryPoints: ['app.js'],
  sourcemap: 'external',
  write: false,
  outdir: 'out',
})

for (let out of result.outputFiles) {
  console.log(out.path, out.contents, out.hash, out.text)
}

hash属性是内容字段的哈希值，是为了方便而提供的。哈希算法（目前为XXH64）依赖于不同的实现，并且可能在esbuild版本之间随时更改。

结语

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

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

（本文完）

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