运行代码

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

搭建 JavaScript 项目

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

npm init rust-webpack your-package-name

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

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

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

您的 Rust Crate

搭建的项目包含一个示例 Rust WebAssembly webpack crate。

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

#![allow(unused)]
fn main() {
// 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 文件。我们看到我们的 Rust 生成的 wasm run 函数在我们的 JS 文件中被调用。

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

运行项目

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

npm run build

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

我们现在应该可以运行我们的项目了！在根目录中，我们将运行

npm start

然后在 Web 浏览器中导航到 http://localhost:8080，您应该会在页面主体中看到显示“Hello from Rust, WebAssembly, and Webpack!”的文本。

如果您成功了，恭喜！您已成功使用 rust-webpack 模板！