从 npm 运行代码

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

搭建 JavaScript 项目

为了搭建一个我们可以使用新包的项目，我们将使用一个名为 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：一个包含 webpack 包的基本 html 文档
• 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 捆绑在一起的配置文件

添加您的 npm 包

搭建的项目包含一个示例 WebAssembly 包 hello-wasm-pack，位于您的 package.json 中。进入 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 并正确使用它！