本教程的这一部分将帮助您创建一个 Webpack JavaScript 项目，该项目将在浏览器中运行您的 WebAssembly 代码。

为了搭建一个我们可以使用新包的项目，我们将使用一个名为 create-wasm-app 的 npm 模板。要使用它，请在与您的 Rust 项目不同的目录中运行此命令

npm init wasm-app my-new-wasm-app

您可以选择不同的项目名称，而不是 my-new-wasm-app。该工具将使用该名称创建一个目录。

如果我们在该目录中查看，我们将看到以下内容

• .gitignore：忽略 node_modules
• LICENSE-APACHE 和 LICENSE-MIT：大多数 Rust 项目都以这种方式获得许可，因此这些文件已为您包含在内
• README.md：您正在阅读的文件！
• index.html：一个基本的 html 文档，其中包含 webpack 包
• index.js：示例 js 文件，其中包含一个注释，显示如何导入和使用 wasm 包
• package.json 和 package-lock.json
  • 引入用于使用 webpack 的 devDependencies
    • webpack
    • webpack-cli
    • webpack-dev-server
  • 定义一个 start 脚本以运行 webpack-dev-server
• webpack.config.js：用于将您的 js 与 webpack 捆绑在一起的配置文件

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

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

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

wasm.greet();

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

npm install

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

npm start

然后在 Web 浏览器中导航到 http://localhost:8080，您应该会看到一个显示“Hello World！”的警报框。

如果您成功了，恭喜您已成功将第一个 wasm 代码上传到 npm 并正确使用它！