[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... ```