ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
[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(); })(); ```