[TOC] ## Analyze ``` esbuild --bundle example.jsx --outfile=out.js --minify --analyze ... out.js 27.4kb 100.0% ├ node_modules/react-dom/cjs/react-dom-server.browser.production.min.js 19.2kb 70.1% ├ node_modules/react/cjs/react.production.min.js 5.9kb 21.5% ├ node_modules/object-assign/index.js 965b 3.4% ├ example.jsx 137b 0.5% ├ node_modules/react-dom/server.browser.js 50b 0.2% └ node_modules/react/index.js 50b 0.2% ``` ## Banner / Footer 使用它可以在生成的 JavaScript 和 CSS 文件的開頭插入任意字符串。這一般被用來插入注釋： ``` esbuild app.js --banner:js=//comment --banner:css=/*comment*/ ``` 在默認插入 ``` esbuild app.js --footer:js=//comment --footer:css=/*comment*/ ``` ## Charset ``` echo 'let π = Math.PI' | esbuild let \u03C0 = Math.PI; echo 'let π = Math.PI' | esbuild --charset=utf8 let π = Math.PI; ``` ## Chunk 代碼切割 ``` esbuild app.js --chunk-names=chunks/[name]-[hash] --bundle --outdir=out --splitting --format=esm ``` ## Conditions 按條件指定包 Node 目前只認可了推薦使用的 development 和 production 定制條件 但是可添加自定義條件 ``` esbuild src/app.js --bundle --conditions=custom1,custom2 ``` conditions 工作示例 在 `package.json` 中 ``` { "name": "pkg", "exports": { "./foo": { "import": "./imported.mjs", "require": "./required.cjs", "default": "./fallback.js" } } } ``` 在使用`import`與`require`條件下會重新映射`require('pkg/foo')`到`pkg/required.cjs`，`import 'pkg/foo'`到`pkg/imported.mjs` 有五種默認情況 - default - 該條件總處于激活狀態。它的目的是放在最后，讓你在沒有其他條件應用時提供兜底。 - import - 該條件僅在通過 ESM import 聲明或者 import() 表達式導入路徑時生效。 可以用來提供特定于 ESM 的代碼。 - require - 該條件僅在通過 CommonJS require() 調用導入路徑時生效。 可以用來提供特定于 CommonJS 的代碼。 - browser - 該條件僅在 esbuild 的 platform 設置為 browser 有效。 可以用來提供特定于瀏覽器的代碼。 - node - 該條件僅在 esbuild 的 platform 設置為 node 有效。 可以用來提供特定于 node 的代碼。 ## entry-names 入口名稱 ``` esbuild src/main-app/app.js --entry-names=[dir]/[name]-[hash] --outbase=src --bundle --outdir=out ``` ## 給 `iife` 全局名稱 不使用全部名稱 ``` > echo 'alert("test")' | esbuild --format=iife (() => { alert("test"); })(); ``` 帶上全部名稱 ``` echo 'module.exports = "test"' | esbuild --format=iife --global-name=xyz var xyz = (() => { ... var require_stdin = __commonJS((exports, module) => { module.exports = "test"; }); return require_stdin(); })(); ```