wasm-pack build

wasm-pack build 命令會建立 JavaScript 互通操作和將套件發布到 npm 所需的檔案。這涉及將您的程式碼編譯成 wasm 並產生一個 pkg 資料夾。此 pkg 資料夾將包含 wasm 二進位檔、一個 JS 包裝器檔案、您的 README 和一個 package.json 檔案。

預設情況下，pkg 目錄會自動被 .gitignore 忽略，因為它包含不打算簽入版本控制的建置成品。⁰

路徑

wasm-pack build 命令可以給予一個可選的路徑參數，例如

wasm-pack build examples/js-hello-world

此路徑應指向包含 Cargo.toml 檔案的目錄。如果未提供路徑，則 build 命令將在目前目錄中執行。

輸出目錄

預設情況下，wasm-pack 將會產生一個名為 pkg 的目錄來存放其建置輸出。如果您想要自訂此目錄，可以使用 --out-dir 旗標。

wasm-pack build --out-dir out

上述命令會將您的建置成品放在名為 out 的目錄中，而不是預設的 pkg。

產生的檔案名稱

旗標 --out-name 設定輸出檔案名稱的前綴。如果未提供，則會使用套件名稱。

使用範例，假設我們的 crate 名稱為 dom

wasm-pack build
# will produce files
# dom.d.ts  dom.js  dom_bg.d.ts  dom_bg.wasm  package.json  README.md

wasm-pack build --out-name index
# will produce files
# index.d.ts  index.js  index_bg.d.ts  index_bg.wasm  package.json  README.md

設定檔

build 命令接受一個可選的設定檔參數：--dev、--profiling 或 --release 其中之一。如果未提供任何參數，則會使用 --release。

這會控制是否啟用偵錯斷言、是否產生偵錯資訊，以及啟用哪些（如果有）最佳化。

設定檔	偵錯斷言	偵錯資訊	最佳化	注意事項
`--dev`	是	是	否	適用於開發和偵錯。
`--profiling`	否	是	是	適用於分析和調查效能問題。
`--release`	否	否	是	適用於發布到生產環境。

--dev 設定檔將使用 cargo 的預設非發行設定檔建置輸出套件。以這種方式建置速度更快，但對輸出的最佳化較少，並啟用偵錯斷言和其他執行階段正確性檢查。--profiling 和 --release 設定檔使用 cargo 的發行設定檔，但前者也啟用偵錯資訊，這有助於在分析器中調查效能問題。

設定檔旗標的確切含義可能會隨著平台的成熟而演變。

目標

build 命令接受 --target 參數。這將會自訂發出的 JS 以及 WebAssembly 檔案的實例化和載入方式。有關此處各種策略的更多文件，請參閱關於使用已編譯輸出的文件。

wasm-pack build --target nodejs

選項	用法	說明
未指定或 `bundler`	Bundler	輸出適合與 Webpack 等 Bundler 互通操作的 JS。您將 `import` JS，並且 `module` 鍵會在 `package.json` 中指定。預設為 `sideEffects: false`。
`nodejs`	Node.js	輸出使用 CommonJS 模組的 JS，以便與 `require` 陳述式一起使用。`package.json` 中的 `main` 鍵。
`web`	瀏覽器原生	輸出可以在瀏覽器中作為 ES 模組原生匯入的 JS，但必須手動實例化和載入 WebAssembly。
`no-modules`	瀏覽器原生	與 `web` 相同，只是 JS 包含在頁面上並修改全域狀態，並且不支援與 `web` 一樣多的 `wasm-bindgen` 功能
`deno`	Deno	輸出可以在 deno 中作為 ES 模組原生匯入的 JS。

範圍

build 命令也接受一個可選的 --scope 參數。這將會設定您的套件名稱的範圍，如果您的套件名稱可能與公共登錄檔中的某些內容衝突，這會很有用。例如

wasm-pack build examples/js-hello-world --scope test

此命令將會為名為 @test/js-hello-world 的套件建立一個 package.json 檔案。有關範圍設定的更多資訊，您可以參考此處的 npm 文件。

模式

build 命令接受一個可選的 --mode 參數。

wasm-pack build examples/js-hello-world --mode no-install

選項	說明
`no-install`	`wasm-pack build` 會隱式地建立 wasm 繫結，而無需安裝 `wasm-bindgen`。
`normal`	使用已安裝的 `wasm-bindgen` 執行 `no-install` 的所有操作。

額外選項

即使 wasm-pack 不支援，build 命令也可以將額外選項直接傳遞給 cargo build。要使用它們，只需將額外參數新增到命令的最後，就像您對 cargo build 所做的那樣。例如，要使用 cargo 的離線功能建置先前的範例

wasm-pack build examples/js-hello-world --mode no-install -- --offline

⁰ 如果您需要在 pkg 目錄和您的 NPM 套件中包含其他資源，我們打算很快為您的用例提供解決方案。 ↩

wasm-pack 您好！