[TOC] ## Build API 比如标志 `--bundle` 表示启动打包 API 示例: 这个过程是递归的，因为依赖的依赖（等等）也将被内联 ``` esbuild in.js --bundle ``` 自动识别import,只能是对常量起作用 ``` // Analyzable imports (will be bundled by esbuild) import 'pkg'; import('pkg'); require('pkg'); // Non-analyzable imports (will not be bundled by esbuild) import(`pkg/${foo}`); require(`pkg/${foo}`); ['pkg'].map(require); ``` ## 语法 ### Define 宏定义 用常量表达式替换全局标识符的方法,类似于宏定义 ``` echo 'hooks = DEBUG && require("hooks")' | esbuild --define:DEBUG=true hooks = require("hooks"); echo 'hooks = DEBUG && require("hooks")' | esbuild --define:DEBUG=false hooks = false; ``` 用字符串字面值替换某些东西 ``` echo 'id, str' | esbuild --define:id=text --define:str=\"text\" text, "text"; ``` ### Entry points 打包入口 将多个文件组合到一个 ``` esbuild home.ts settings.ts --bundle --outdir=out ``` 分别输出多个文件 ``` esbuild out1=home.js out2=settings.js --bundle --outdir=out ``` ### External 排除 标记一个文件或者包为外部（external），从而将其从你的打包结果中移除 ``` // app.js require("fsevents"); esbuild app.js --bundle --external:fsevents --platform=node ``` 也可使用通配符`*`,如 `--externa:*.png`或排除目录`--external: ./images/*` ### Format 输出格式 #### **IIFE** 改格式表示立即执行 ``` > echo 'alert("test")' | esbuild --format=iife (() => { alert("test"); })(); ``` #### **CommonJS** cjs 格式打包代表"CommonJS" 并且在 node 环境中运行, `--platform=node` 时， cjs 为默认格式 ``` echo 'export default "test"' | esbuild --format=cjs ... var stdin_exports = {}; __export(stdin_exports, { default: () => stdin_default }); module.exports = __toCommonJS(stdin_exports); var stdin_default = "test"; ``` #### **ESM** `esm`格式代表 "ECMAScript module"。它假设环境支持`import`与`export`语法 ``` echo 'module.exports = "test"' | esbuild --format=esm ... var require_stdin = __commonJS({ "<stdin>"(exports, module) { module.exports = "test"; } }); export default require_stdin(); ``` esm 格式可以在浏览器或者 node 中使用。但是你必须显式地以模块加载它 * 在浏览器中，你可以使用`<scriptsrc="file.js"type="module"></script>`加载模块。   * 在 node 环境中，你可以使用`node--experimental-modulesfile.mjs`加载模块。 请注意 node 需要`.mjs`拓展名，除非你在`package.json`文件中配置了`"type":"module"`。 你可以使用 esbuild 中的[out extension](https://esbuild.bootcss.com/api/#out-extension)设置来自定义生成文件的拓展名。 你可以点击[这里](https://nodejs.org/api/esm.html)获取更多关于使用 ECMAScript modules 的内容。 ### Inject 替换函数 这个配置项可以自动替换从另一个文件引入的全局变量 看示例 ``` // process-shim.js export let process = { cwd: () => '' } ``` ``` // entry.js console.log(process.cwd()) ``` ``` esbuild entry.js --bundle --inject:./process-shim.js --outfile=out.js ``` 这尝试替换 node 的 process.cwd() 函数的使用，以阻止包在浏览器中运行它而导致崩溃 ``` // out.js let process = {cwd: () => ""}; console.log(process.cwd()); ``` **inject 与 define 一起使用** 这样你的导入会更具可选择性 ``` // process-shim.js export function dummy_process_cwd() { return '' } ``` ``` // entry.js console.log(process.cwd()) ``` ``` esbuild entry.js --bundle --define:process.cwd=dummy_process_cwd --inject:./process-shim.js --outfile=out.js ``` ``` // out.js function dummy_process_cwd() { return ""; } console.log(dummy_process_cwd()); ``` ### Loader 解析输入文件 ``` import url from './example.png' let image = new Image image.src = url document.body.appendChild(image) ``` ``` esbuild app.js --bundle --loader:.png=dataurl --loader:.svg=text ``` 图片会转为 dataurl 格式 加载typescript ``` echo 'let x: number = 1' | esbuild --loader=ts let x = 1; ``` ### Minify 压缩 ``` > echo 'fn = obj => { return obj.x }' | esbuild --minify fn=n=>n.x; ``` 同样适用于 css ``` > echo 'div { color: yellow }' | esbuild --loader=css --minify div{color:#ff0} ``` ### Outdir / Outfile 输出文件 ``` esbuild app.js --bundle --outdir=out 输出文件 ``` ``` esbuild app.js --bundle --outfile=out.js ``` ### Platform 默认情况下，esbuild 的打包器为浏览器生成代码 打包node的 ``` esbuild app.js --bundle --platform=node ``` ### Serve 方法 1：为 esbuild 构建出的所有内容提供服务 监听目录 ``` esbuild src/app.js --servedir=www --outdir=www/js --bundle ``` html中 ``` <script src="js/app.js"></script> ``` 当你这样做时，每一个 HTTP 请求都会导致 esbuild 重新构建你的代码 方法 2: 仅为 esbuild 生成的文件提供服务 对指定目录生效,可用户大型项目 ``` esbuild src/app.js --outfile=out.js --bundle --serve=8000 ``` html ``` <script src="http://localhost:8000/out.js"></script> ``` ### Sourcemap 用于调试 ``` esbuild app.ts --sourcemap --outfile=out.js ``` ### Target 输出目标 ``` esbuild app.js --target=es2020,chrome58,firefox57,safari11,edge16,node12 ``` ### Watch ``` > esbuild app.js --outfile=out.js --bundle --watch [watch] build finished, watching for changes... ```