欢迎来到wasm-packdocs！

该工具旨在成为构建和使用生锈的WebAssembly的一站式商店，您希望在浏览器中或使用Node.js与JavaScript互操作。wasm-pack帮助您构建生锈的WebAssembly包，您可以将其发布到npm注册表，或者与您已经使用的工作流中的任何javascript包一起使用，例如webpack 或greenkeeper。

该项目是rust-wasm团队的一部分。您可以通过访问该回购找到更多信息！

2

2.1 先决条件

首先，您需要安装wasm-packCLI，并wasm-pack -V应打印刚刚安装的版本。

接下来，既然wasm-pack是构建工具，您需要确保已 安装Rust。确保rustc -V打印出至少1.30.0。

最后，如果您要使用wasm-pack发布到NPM，则需要安装和配置npm。将来，我们打算重写npm注册表客户端位，以便消除对Node运行时的需求。如果你对这项工作感到兴奋 - 你应该联系维护人员并参与其中！

使用非生锈设置？在这里学习如何为wasm-pack配置它。

2.2 非rustup设置

非Rustup设置
wasm-pack使用wasm32-unknown-unknown目标编译代码。wasm-pack如果你还没有安装它，它会自动为Rustup设置添加这个目标rustup target add wasm32-unknown-unknown。但是，如果您不使用Rustup，我们将无法自动执行此操作，您必须自己执行此操作。

手动添加wasm32-unknown-unknown
免责声明：这不能保证适用于每个设置。以下这些说明特定于与确切的rustc版本匹配的设置，这意味着下载的wasm32目标可能不兼容。

要手动添加wasm32-unknown-unknown目标，您需要从rust-lang网站下载它并将内容放在正确的文件夹中。

所有不同rustc版本的所有目标都没有在网站上以人为方式呈现（仅）您只需选择所需的并下载它，其中一个原因是Rustup为您和包装处理所有这些目标主要是为工具而建。但是，以下步骤将介绍如何执行此操作。

首先，rustc通过运行检查您正在使用的版本rustc --version。这应该显示如下：rustc 1.33.0 (2aa4c46cf 2019-02-28)。然后，您需要为您的rustc版本下载正确的wasm32目标。rustc版本是url的一部分，这意味着rustc 1.33.0url将如下所示：https://static.rust-lang.org/dist/rust-std-1.33.0-wasm32-unknown-unknown.tar.gz。

以下是不同rustc版本的URL的一些示例：

每晚https://static.rust-lang.org/dist/rust-std-nightly-wasm32-unknown-unknown.tar.gz
具体日期每晚（2019-03-10）https://static.rust-lang.org/dist/2019-03-10/rust-std-nightly-wasm32-unknown-unknown.tar.gz
Beta https://static.rust-lang.org/dist/rust-std-beta-wasm32-unknown-unknown.tar.gz
您应该可以通过执行wget https://static.rust-lang.org/dist/rust-std-1.33.0-wasm32-unknown-unknown.tar.gz或仅通过访问Web浏览器中的URL 来下载它。

在您选择的位置下载此tarball后，您应该将其解压缩。这将导致命名的文件夹中rust-std-1.33.0-wasm32-unknown-unknown包含一些文件夹和文件，但有趣的是一个文件夹，名为rust-std-wasm32-unknown-unknown含有lib而且应该包含一个rustlib文件夹，并在一个叫夹wasm32-unknown-unknown。这是我们要移动的文件夹。

以下是rustc 1.33.0的结构应该如何：

rust-std-1.33.0-wasm32-unknown-unknown
├── components
├── install.sh
├── rust-installer-version
└── rust-std-wasm32-unknown-unknown
├── lib
│ └── rustlib
│ └── wasm32-unknown-unknown
要知道，我们应该将这个wasm32-unknown-unknown文件夹，我们需要运行rustc --print sysroot应打印看起来是这样的（这将在不同的操作系统不同）的路径：/home/user/rust/rust-1.33.0-2019-02-28-2aa4c46cf。该文件夹应包含包含lib文件夹的rustlib文件夹。我们应该移动wasm32-unknown-unknown到这个文件夹。

在类似unix的操作系统上，我们可以使用以下命令执行此操作： mv rust-std-1.33.0-wasm32-unknown-unknown/rust-std-wasm32-unknown-unknown/lib/rustlib/wasm32-unknown-unknown /home/user/rust/rust-1.33.0-2019-02-28-2aa4c46cf/lib/rustlib/应该是它！

3 命令

wasm-pack 在构建Rust生成的WebAssembly项目的过程中有几个命令可以帮助您。

init：此命令已被弃用，转而支持build。
build：此命令pkg使用已编译的wasm和生成的JS为您构建目录。学到更多
pack和publish：这些命令将创建一个tarball，并可选择将其发布到注册表，例如npm。学到更多

4 教程

我们有两个教程可以帮助您开始wasm-pack：

如果要创建和发布包：npm浏览器包
如果你想使用Webpack与一个JavaScript应用程序一起开发一个Wasm库：与Webpack的混合应用程序

4.1 Webpack的混合应用程序

本教程的目的是向您介绍的rust-webpack-template 和wasm-pack通过模板构建示例应用程序的工作流程。

本教程面向既是WebAssembly和Rust的初学者，也不需要很多Rust知识来完成本教程。

请务必阅读并遵循先决条件。

4.1.1入门

您可以使用rustwasm webpack-template创建一个新的Rust-WebAssembly webpack项目。
运行

npm init rust-webpack my-app

最后一个参数将是您的项目名称。运行该命令后，您将拥有一个包含新项目的目录，随时可以使用。我们将在本指南中进一步讨论此模板中包含的内容。

4.1.2 运行代码

Rust Webpack模板旨在使用Rust生成的WebAssembly和Webpack创建单一样式的Web应用程序，而无需将您的ism发布到NPM。本教程的这一部分将解释如何构建一个Webpack JavaScript项目，该项目将在浏览器中运行WebAssembly代码。

支持JavaScript项目

为了生成一个新的Rust Webpack项目，我们使用了rust-webpacknpm模板。

npm init rust-webpack your-package-name

将使用您提供的名称创建一个新项目文件夹。

如果我们查看项目，我们将看到以下内容：

.gitignore：忽略 node_modules
LICENSE-APACHE并且LICENSE-MIT：大多数Rust项目都是以这种方式获得许可的，因此这些项目都包含在内
README.md：你正在阅读的文件！
index.html：一个包含webpack包的裸骨html文档
js/index.js：示例JS文件，其中包含显示如何导入和使用wasm pkg的注释
package.json并且package-lock.json：
拉入devDependencies以使用webpack：
webpack
webpack-cli
webpack-dev-server
定义start要运行的脚本webpack-dev-server
webpack.config.js：用于将JS与webpack捆绑在一起的配置文件
crate/src/lib.rs：你的Rust crate代码！

你的rust create

脚手架项目包括示例Rust WebAssembly webpack crate。

在crate/src/lib.rs文件中我们看到一个run可以从我们的JS文件中调用的函数：

// Called by our JS entry point to run the example.
#[wasm_bindgen]
pub fn run() -> Result<(), JsValue> {
    set_panic_hook();

    // ...
    let p: web_sys::Node = document.create_element("p")?.into();
    p.set_text_content(Some("Hello from Rust, WebAssembly, and Webpack!"));
    // ...

    Ok(())
}

现在，打开js/index.js文件。我们看到run在我们的JS文件中调用了Rust生成的wasm 函数。

import("../crate/pkg").then(module => {
  module.run();
});

运行项目

要生成我们的Rust编译到wasm代码，在我们运行的根目录中：

npm run build

这将在新目录中创建捆绑的JavaScript模块dist。

我们现在应该准备好运行我们的项目！在根目录中，我们将运行：

npm start

然后在Web浏览器中导航到http://localhost:8080，您应该看到页面正文中显示“来自Rust，WebAssembly和Webpack的Hello！”的文本。

如果你做过恭喜！您已经成功使用了rust-webpack模板！

4.2npm浏览器包教程

本教程的目标是wasm-pack通过构建一个旨在用于浏览器应用程序的小型npm包来向您介绍工作流。

本教程面向既是WebAssembly和Rust的初学者，也不需要很多Rust知识来完成本教程。

在开始之前一定要完成以下操作：

安装 wasm-pack
阅读并安装先决条件。
⚠️我们强烈建议您安装Node.js的使用版本管理。你可以在这里了解更多。

4.2.1 入门

您可以使用rustwasm wasm-pack-template创建新的Rust-WebAssembly项目。

为此，您将需要该cargo-generate工具。要安装cargo-generate：

cargo install cargo-generate

然后运行：

cargo generate --git https://github.com/rustwasm/wasm-pack-template

系统将提示您为项目命名。完成后，您将拥有一个包含新项目的目录，随时可以使用。我们将在本指南中进一步讨论此模板中包含的内容。

手动设置
⚠️如果您不想使用模板，或者模板有问题，可以按照这些说明进行手动设置。

4.2.1.1手动设置

⚠️这不是推荐的wasm-pack项目启动方式！如果你错误地到此为止，请查看我们推荐的项目开始。

第1步：创建一个新的Rust Library项目
您可以my-lib使用此命令创建一个名为的新Rust项目。

cargo new --lib my-lib

该–lib标志指定项目是一个库，这很重要，因为我们将从JavaScript调用此代码。

第2步：编辑您的Cargo.toml文件
添加wasm-bindgen依赖项
你将需要添加wasm-bindgen到您的Cargo.toml相关内容部分。wasm-bindgen是一个促进wasm模块和JavaScript之间互操作性的工具。

⚠️如果您来自JavaScript，您可能会注意到，当我们添加依赖项时，没有^或~符号 - 看起来我们正在锁定该0.2版本。但事实并非如此！在Rust中，^暗示着。

加 crate-type
接下来，添加一个[lib]名为crate-typeset to 的新字段"cdylib"。这指定库是一个C兼容的动态库，它有助于cargo在定位时将正确的标志传递给Rust编译器 wasm32。

进行这些更改后，您的Cargo.toml文件应如下所示：

[package]
name = "hello-wasm"
version = "0.1.0"
authors = ["Ashley Williams <ashley666ashley@gmail.com>"]
description = "babby's first wasm package"
license = "MIT/Apache-2.0"
repository = "https://github.com/ashleygwilliams/hello-wasm"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen="0.2"

第3步：写一些Rust！
现在您的Cargo.toml文件夹已在文件中正确配置，设置项目的唯一步骤是在src/lib.rs文件中包含一些Rust代码。

浏览器示例
我们的模板为您提供了一个快速的“Hello，World”项目，用于编译成可在浏览器中使用的WebAssembly库：

extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet() {
    alert("Hello, World!");
}

就是这样！我们将讨论此代码在模板深入挖掘中的作用，您现在都已设置好。快乐的wasm-packing！

4.2。2模板深挖

⚠️本节深入探讨了“Hello，World”项目文件的内容，专门为那些不熟悉Rust的人编写。如果您只是检查工作流程，请跳过此部分！

⚠️如果您尚未使用模板来设置项目，则文件内容可能与此处描述的内容略有不同。

模板给了我们什么
让我们首先看一下模板为我们生成的内容。

• Cargo.toml - 货物清单
• src/lib.rs - 主库模块
• src/utils.rs - 实用模块
• wee_alloc - 一个微小的内存分配器
• tests/web.rs - 运行无头浏览器测试

4.2.2.1 Cargo.toml

Cargo.toml是Rust的包管理器的清单文件cargo。此文件包含元数据，例如包的名称，版本和依赖项，这些元素在Rust中称为“crates”。

模板为我们提供了大量元数据，但有三个关键部分需要讨论：

1. crate-type
2. wasm-bindgen 依赖
3. [features]和wee_alloc，console_error_panic_hook依赖

1。 crate-type

[lib]
crate-type = ["cdylib", "rlib"]

锈病wasm与正常的箱子有点不同，因此我们需要在我们的产品中注意到这一点Cargo.toml。

[lib]Cargo项目通常不需要这个注释，如果你熟悉其他Rust包，你会记得最常见的crate类型是rlib（默认）或bin二进制（不需要crate-type 注释）。

这里虽然crate-type = [“cdylib”]通常表示您希望编译器创建动态系统库，但对于WebAssembly目标，它只是表示“创建*.wasm没有start函数的文件”。在其他平台上，此输出类型将*.so在Linux，.dylibmacOS和.dllWindows 上创建文件。

我们还指定crate-type = [“rlib”]确保我们的库可以进行单元测试wasm-pack test（我们稍后会看到）。如果没有这个，我们将无法测试我们的库，因为cdylibcrate类型与wasm-pack单元测试的风格不兼容 。

您可以在此处阅读有关链接和包装类型的更多信息。

2. wasm-bindgen依赖
wasm-bindgen是我们最重要的依赖。这个包允许我们使用该 #[wasm-bindgen]属性标记代码，代表我们在JavaScript和Rust生成之间所需的接口wasm。我们可以使用此属性导入JS并导出Rust。

wasm-bindgen = "0.2"

当我们讨论生成的内容时，我们会看到更多关于如何使用这个库的信息lib.rs。

⚠️如果您来自JavaScript，您可能会注意到，当我们添加依赖项时，没有^或~符号 - 看起来我们正在锁定该0.2版本。但事实并非如此！在Rust中，^暗示着。您可以在 货物文档中阅读有关指定依赖关系的更多信息。

3. [features]和wee_alloc，console_error_panic_hook依赖
作为我们设计模板的一部分，该模板可以帮助人们发现特定用例的有用条件箱，这个模板包含两个依赖项，对于开发Rustrate的人来说非常有用wasm：和 。 console_error_panic_hookwee_alloc

因为这些依赖关系主要用于Rust wasm 开发工作流程的特定部分，所以我们还设置了一些粘合代码，允许我们将它们作为依赖项包含在内，但也允许它们可选地包含在内。

[features]
default = ["console_error_panic_hook"]

[dependencies]
wasm-bindgen = "0.2"

# The `console_error_panic_hook` crate provides better debugging of panics by
# logging them with `console.error`. This is great for development, but requires
# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
# code size when deploying.
console_error_panic_hook = { version = "0.1.1", optional = true }

# `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
# compared to the default allocator's ~10K. It is slower than the default
# allocator, however.
#
# Unfortunately, `wee_alloc` requires nightly Rust when targeting wasm for now.
wee_alloc = { version = "0.4.2", optional = true }

在我们的代码中，我们会将某些代码部分标记为仅在特定[features] 情况下启用时运行，特别是console_error_panic_hook和wee_alloc。默认情况下，仅console_error_panic_hook启用。要禁用或启用任一功能，默认情况下，我们可以编辑下的default矢量[features]。

要了解有关这些功能的更多信息，我们将在src/lib.rs以及 src/utils.rs各部分中进行深入讨论。

简而言之，它们包括：

• console_error_panic_hook用于将恐慌消息记录到开发人员控制台。
• wee_alloc，一个针对小代码大小优化的分配器。

4.2.2.2 SRC / lib.rs

lib.rs是模板的主要源文件。该名称lib.rs通常意味着此Rust项目将编译为库。

它包含三个关键部分：

1. #[wasm_bindgen] functions
2. 箱包进口
3. wee_alloc 可选择的依赖
4. 什么是wee_alloc？
   我们将从最重要的部分开始lib.rs- 这两个#[wasm_bindgen]函数（可以在文件的底部找到）。在许多情况下，这是lib.rs您需要修改的唯一部分。

1.使用 wasm_bindgen
为了wasm-bindgen更方便地从包中公开功能，我们可以使用use关键字。 use允许我们方便地参考板条箱或模块的部分。您可以在本书的本章中了解有关Rust如何编写模块化代码的更多信息。

use wasm_bindgen::prelude:?;
许多包装箱都包含一个前奏曲，一个便于一次导入所有内容的列表。这允许在没有冗长前缀的情况下方便地访问模块的共同特征。例如，在这个文件中我们只能使用 #[wasm_bindgen]它，因为它被前奏带入了范围。

此末尾的星号use表示wasm_bindgen::prelude模块prelude内的所有内容（即包中的模块wasm_bindgen）都可以在不加前缀的情况下引用wasm_bindgen::prelude。

例如，#[wasm_bindgen]也可以写成#[wasm_bindgen::prelude::wasm_bindgen]，尽管不建议这样做。

1. #[wasm_bindgen]功能
   该#[wasm_bindgen]属性表明它下面的函数可以在JavaScript和Rust中访问。

#[wasm_bindgen]
extern {
    fn alert(s: &str);
}

该extern块将外部JavaScript函数alert导入Rust。要求alert从Rust 调用此声明。通过以这种方式声明它，wasm-bindgen将创建JavaScript存根alert，允许我们在Rust和JavaScript之间来回传递字符串。

我们可以看到该alert函数需要一个s类型的参数&str，一个字符串。在Rust中，任何字符串文字，例如"Hello, test-wasm!"类型&str。所以，alert可以通过写作来调用alert(“Hello, test-wasm!”);。

我们知道以alert这种方式声明，因为它是我们alert在JavaScript中调用的方式 - 通过传递一个字符串参数。

#[wasm_bindgen]
pub fn greet() {
    alert("Hello, test-wasm!");
}

如果我们要编写greet没有#[wasm_bindgen]属性的函数，那么greet在JavaScript中就不会轻易访问。此外，我们无法原生地转换某些类型，例如&strJavaScript和Rust之间的类型。因此，允许从JavaScript调用#[wasm_bindgen]属性和先前导入。alertgreet

这是与JavaScript接口所需要知道的所有内容，至少要开始！通过阅读wasm-bindgen文档，您可以学到更多东西 ！

如果您对其他人感到好奇，请继续阅读。

2.板条箱组织

mod utils;

此语句声明一个名为的新模块utils，该模块由内容定义utils.rs。同样，我们可以utils.rs在utils声明中放置内容，将行替换为：

mod utils {
    // contents of utils.rs
}

无论哪种方式，utils.rs定义单个公共函数的内容set_panic_hook。因为我们将它放在utils模块中，所以我们可以通过写入直接调用该函数utils::set_panic_hook()。我们将讨论如何以及为何使用此功能src/utils.rs。

    // When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
    // When the `wee_alloc` feature is enabled, use `wee_alloc` as the global	// allocator.
    // allocator.	#[cfg(feature = "wee_alloc")]
    if #[cfg(feature = "wee_alloc")] {	#[global_allocator]
        #[global_allocator]	static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;

在编译时，这将测试是否wee_alloc为此编译启用了该功能。如果它已启用，我们将配置一个全局分配器（根据 wee_alloc文档），否则它将编译为空。

正如我们之前看到的那样，default向量[features]仅包含"console_error_panic_hook"而非包含"wee_alloc"。因此，在这种情况下，这个块将完全没有代码替换，因此将使用默认的内存分配器而不是wee_alloc。

####4.2.2.3 SRC / utils.rs
目的utils.rs是定义utils包含单个函数的模块set_panic_hook。如上一节所述，此功能成为utils模块lib.rs的一部分。

如果console_error_panic_hook未启用该功能，则将set_panic_hook其定义为内联空函数。因此，使用它不会产生运行时性能或代码大小的损失。

我们会讨论：

定义 set_panic_hook
什么是console_error_panic_hook？

1.定义 set_panic_hook

pub fn set_panic_hook() {
    // When the `console_error_panic_hook` feature is enabled, we can call the
    // `set_panic_hook` function at least once during initialization, and then
    // we will get better error messages if our code ever panics.
    //
    // For more details see
    // https://github.com/rustwasm/console_error_panic_hook#readme
    #[cfg(feature = "console_error_panic_hook")]
    console_error_panic_hook::set_once();
}

在这里，我们定义一个以cfg属性开头的函数。这个属性 #[cfg(feature = “console_error_panic_hook”)]告诉Rust检查是否console_error_panic_hook在编译时设置了该 功能。如果是，它将调用此函数。如果不是 - 它不会！

2.什么是console_error_panic_hook？
该包console_error_panic_hook允许在Web浏览器中调试Rust恐慌消息，从而使调试WebAssembly代码变得更加容易。

让我们比较在启用该功能之前和之后Rust代码发生混乱时会发生什么：

之前："RuntimeError: Unreachable executed"

后："panicked at 'index out of bounds: the len is 3 but the index is 4', libcore/slice/mod.rs:2046:10"

为此，配置了一个恐慌钩子，通过JavaScript console.error函数将恐慌记录到开发人员控制台。

请注意，虽然这console_error_panic_hook不是完全自动的，但您需要确保utils::set_panic_hook()在我们的任何代码运行之前调用它（并且可以安全地运行set_panic_hook多次）。

有关更多详细信息，请参阅console_error_panic_hook 存储库。

4.2.2.4 wee_alloc

1. 什么是wee_alloc？
2. 启用 wee_alloc
3. 每晚生锈
4. 什么是wee_alloc？

WebAssembly代码经常通过网络传输给用户，因此编译代码大小通常很重要，以确保应用程序快速加载并响应。

wee_alloc 是一个为WebAssembly设计的微型分配器，它具有（预压缩）代码大小仅为一千字节的足迹。

分析表明，Rust的默认内存分配器需要超过一半的最小WebAssembly内存占用。然而，WebAssembly代码通常不需要复杂的分配器，因为它通常只需要几个大的初始分配。

wee_alloc换取速度的大小。它的代码大小很小，但就性能而言，它与默认的全局分配器没有竞争力。

有关更多详细信息，请参阅wee_alloc 存储库或 有关缩小WebAssembly二进制文件的代码大小的一般文档。

启用 wee_alloc
在lib.rs，我们有wee_alloc一个cfg_if!宏内部的配置：

cfg_if! {
    if #[cfg(feature = "wee_alloc")] {
        #[global_allocator]
        static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
    }
}

此代码块旨在初始化wee_alloc为全局内存分配器，但仅wee_alloc在编译时启用该功能。可以通过在构建时传递额外选项来启用该功能：

$ wasm-pack build -- --features wee_alloc

或者你可以默认打开它Cargo.toml：

[features]
default = ["console_error_panic_hook", "wee_alloc"]

4.2.2.5测试/ web.rs

web.rs是一种使用Cargo定义的集成测试，旨在通过wasm-pack test命令在无头Web浏览器中运行。

它包含三个关键部分：

#[wasm_bindgen_test] functions
[板条箱配置](https://rustwasm.github.io/docs/wasm-pack/tutorials/npm-browser-packages/template-deep-dive/tests-web-rs.html#a2-crate-configuration)
[#!\[cfg\] 指令](https://rustwasm.github.io/docs/wasm-pack/tutorials/npm-browser-packages/template-deep-dive/tests-web-rs.html#a3-cfg-directives)

1. #[wasm_bindgen_test]功能
   的#[wasm_bindgen_test]是像正常锈#[test] 属性，除了它定义了WebAssembly和无头的网页浏览器访问测试的测试。

注意：最终#[test]也可以使用WebAssembly！目前虽然自定义测试框架不稳定。

#[wasm_bindgen_test]
fn pass() {
assert_eq!(1 + 1, 2);
}
这里的pass函数是一个单元测试，它断言算术在WebAssembly中工作，就像我们期望的那样。如果测试发生恐慌（例如 assert_eq!假），则测试将失败，否则测试将成功。

该参考文档#[wasm_bindgen_test]应该如何定义这些测试的详细信息。

2.箱子配置
除了本单元中的测试，我们还会看到：

use wasm_bindgen_test::*;

wasm_bindgen_test_configure!(run_in_browser);

就像我们在前面看到src/lib.rs的*进口从拉的一切 wasm_bindgen_test，特别是wasm_bindgen_test_configure宏观和 wasm_bindgen_test属性。

的wasm_bindgen_test_configure宏（通过结束在表示!）用于指示该测试的目的是在web浏览器中执行，而不是Node.js的，这是缺省值。

3. #![cfg]指令
我们会注意到这个箱子的最后一部分是顶部的这个陈述：

#![cfg(target_arch = "wasm32")]

此语句表示该测试仅适用于wasm32 体系结构或wasm32-unknown-unknown目标。这使得cargo test 在项目中工作，如果库也被用于其它平台，确保这些测试只在Web浏览器中执行开发。

4.2.3 建立你的项目

我们编写了代码，现在我们需要构建它。

我们正在编写一个应该在浏览器中使用的包，所以我们在终端中运行它：

$ wasm-pack build

如果您正在编写一个应该在Node.js中使用的包（例如require，使用CommonJS模块），您可以在终端中运行它：

$ wasm-pack build --target nodejs

运行时此命令可以执行以下操作：

如果你还没有，它会将你的代码编译成wasm
它将生成一个pkg包含wasm文件的文件夹，一个围绕wasm的JS包装器文件，一个README package.json文件和一个文件。

4.2.4 测试你的项目

在编写和构建代码之后，让我们实际执行它！您可以执行以下测试：

$ wasm-pack test --firefox
[INFO]: Checking for the Wasm target...
    Finished dev [unoptimized + debuginfo] target(s) in 0.02s
     Running target/wasm32-unknown-unknown/debug/deps/web-9e7d380f8600b08e.wasm
Interactive browsers tests are now available at http://127.0.0.1:8000

Note that interactive mode is enabled because `NO_HEADLESS`
is specified in the environment of this process. Once you're
done with testing you'll need to kill this server with
Ctrl-C.

控制台尚未完成，但如您所示，您可以在Web浏览器中访问http://127.0.0.1:8000以查看测试输出：

running 1 test

test web::pass ... ok

test result: ok. 1 passed; 0 failed; 0 ignored

我们现在已经在网络浏览器中执行了我们的第一次测试！

如果您想在无头网络浏览器中执行测试（您不需要手动访问页面），您可以执行以下操作：

$ wasm-pack test --headless --firefox

同样，如果您正在为Node.js开发项目，您也可以执行 wasm-pack test --nodejs以在Node中运行测试。

请务必查看其他支持功能的测试参考文档！

4.2.5 npm的包装代码

我们已经制作了代码，所以现在我们需要将它们打包。在项目目录中运行以下命令：

$ wasm-pack build --scope MYSCOPE

MYSCOPE你的npm用户名在哪里？通常你可以输入，wasm-pack init但由于其他人也在做这个教程，我们不希望与wasm-add包名冲突！运行时此命令可以执行以下操作：

如果你还没有，它会将你的代码编译成wasm
它将生成一个包含wasm文件的pkg文件夹，一个围绕wasm的JS包装文件，一个自述package.json文件和一个文件。
这就是将代码上传到npm所需的一切！我们这样做吧！

首先，如果您还没有帐户，则需要使用之前创建的帐户登录npm：

$ wasm-pack login

接下来，您需要进入pkg目录并实际上传包：

$ cd pkg
$ npm publish --access=public

现在通常情况下，如果事情没有范围，你可以做，npm publish但如果你给它一个范围，你需要告诉npm这实际上是公开的，所以它可以发布它。我们需要在这里这样做，因为我们给了我们的包一个范围，以避免彼此冲突！接下来是实际运行代码并验证我们从npm得到它以及我们如何使用该代码

4.2.6 添加你的npm包

脚手架项目包括一个示例WebAssembly包hello-wasm-pack，在您的 package.json。进入该package.json文件，添加您的包，并hello-wasm-pack从该"dependencies"部分中删除 依赖项。

现在，打开index.js文件。将hello-wasm-pack第一行替换为包的名称：

import * as wasm from "<your package name>";

wasm.greet();

运行项目
在我们运行项目之前，我们需要确保安装依赖项：

npm install

我们现在应该准备好运行我们的项目！要运行我们的项目，我们将运行：

npm start

然后在Web浏览器中导航到http://localhost:8080，您应该会看到一个警告框，上面写着“Hello World！”。

如果您确实恭喜您已成功将您的第一段ism代码上传到npm并正确使用它！

Cargo.toml 组态

wasm-pack可以通过package.metadata.wasm-pack键 配置Cargo.toml。每个选项都有默认值，不是必需的。

有三种模式：dev，profiling，和release。这些对应–dev，–profiling以及–release传递给标志wasm-pack build。

可用的配置选项及其默认值如下所示：

[package.metadata.wasm-pack.profile.dev.wasm-bindgen]
# Should we enable wasm-bindgen's debug assertions in its generated JS glue?
debug-js-glue = true
# Should wasm-bindgen demangle the symbols in the "name" custom section?
demangle-name-section = true
# Should we emit the DWARF debug info custom sections?
dwarf-debug-info = false

[package.metadata.wasm-pack.profile.profiling.wasm-bindgen]
debug-js-glue = false
demangle-name-section = true
dwarf-debug-info = false

[package.metadata.wasm-pack.profile.release.wasm-bindgen]
debug-js-glue = false
demangle-name-section = true
dwarf-debug-info = false