xtask-wasm

这个 crate 旨在通过扩展自定义子命令来提供一个简单且可定制的构建 Wasm 项目的途径，基于 xtask 概念，而不是使用外部工具（如 wasm-pack）。

最低支持的 Rust 版本

由于我们使用的 std 中有一个函数在之前的版本中存在安全问题，这个 crate 至少需要 Rust 1.58.1。 (见 cve-2022-21658).

设置

将 xtask-wasm 添加到项目的最佳方式是创建一个包含两个包的工作空间：您的项目包和 xtask 包。

使用 xtask 创建项目

• 创建一个新目录，该目录将包含您的项目两个包以及工作空间的 Cargo.toml

  mkdir my-project
  cd my-project
  touch Cargo.toml
  

• 使用 cargo new

  cargo new my-project
  cargo new xtask
  

• 打开工作空间中的 Cargo.toml 并添加以下内容

  [workspace]
  default-members = ["my-project"]
  members = [
      "my-project",
      "xtask",
  ]
  

• 创建一个 .cargo/config.toml 文件并添加以下内容

  [alias]
  xtask = "run --package xtask --"
  

目录结构应如下所示

project
├── .cargo
│   └── config.toml
├── Cargo.toml
├── my-project
│   ├── Cargo.toml
│   └── src
│       └── ...
└── xtask
    ├── Cargo.toml
    └── src
        └── main.rs

现在您可以使用以下命令运行您的 xtask 包

cargo xtask

有关 xtask 的更多信息，请参阅 此处。

将 xtask-wasm 作为依赖项使用

最后，将以下内容添加到 xtask 包的 Cargo.toml

[dependencies]
xtask-wasm = "0.1.1"

用法

这个库提供了三个结构体

• Dist - 为 Wasm 生成分布式包。
• Watch - 当检测到更改时重新运行给定的命令（使用 xtask-watch）。
• DevServer - 在指定的 IP 地址上托管您的项目。

它们都实现了 clap::Parser，这使得它们可以轻松地添加到现有的 CLI 实现中，并且足够灵活，可以针对大多数用例进行定制。

您可以在每个类型的文档级别找到更多信息。

示例

基本实现

use std::process::Command;
use xtask_wasm::{anyhow::Result, clap, default_dist_dir};

#[derive(clap::Parser)]
enum Opt {
    Dist(xtask_wasm::Dist),
    Watch(xtask_wasm::Watch),
    Start(xtask_wasm::DevServer),
}


fn main() -> Result<()> {
    let opt: Opt = clap::Parser::parse();

    match opt {
        Opt::Dist(dist) => {
            log::info!("Generating package...");

            dist
                .dist_dir_path("dist")
                .static_dir_path("my-project/static")
                .app_name("my-project")
                .run_in_workspace(true)
                .run("my-project")?;
        }
        Opt::Watch(watch) => {
            log::info!("Watching for changes and check...");

            let mut command = Command::new("cargo");
            command.arg("check");

            watch.run(command)?;
        }
        Opt::Start(mut dev_server) => {
            log::info!("Starting the development server...");

            dev_server.arg("dist").start(default_dist_dir(false))?;
        }
    }

    Ok(())
}

示例/演示

提供xtask-wasm的基本实现，用于生成Web应用包，使用Yew的“Hello World”应用。此示例演示了一个简单的目录结构和自定义的dist过程，该过程使用wasm-opt功能。

可用的子命令有

• 构建Web应用包。

  cargo xtask dist
  

  • 构建Web应用包，下载wasm-opt二进制文件（目前使用110版本）并优化dist过程生成的Wasm。

    cargo xtask dist --optimize
    

• 构建Web应用包并监视工作区根目录中的更改。

  cargo xtask watch
  

• 在127.0.01:8000上提供优化的Web应用dist，并监视工作区根目录中的更改。

  cargo xtask start
  

可以使用cargo xtask <subcommand> --help找到更多标志。

此示例还演示了使用run-example功能的使用，该功能允许您使用以下内容

cargo run --example run_example

此命令将在examples/run_example中使用开发服务器运行代码。

功能

• wasm-opt：启用WasmOpt结构体，该结构体有助于非常容易地下载和使用wasm-opt。
• run-example：一个从examples/目录中运行示例的辅助工具，使用开发服务器。
• sass：允许在项目中使用SASS/SCSS。

故障排除

当使用clap的重新导出时，您可能会遇到以下错误

error[E0433]: failed to resolve: use of undeclared crate or module `clap`
 --> xtask/src/main.rs:4:10
  |
4 | #[derive(Parser)]
  |          ^^^^^^ use of undeclared crate or module `clap`
  |
  = note: this error originates in the derive macro `Parser` (in Nightly builds, run with -Z macro-backtrace for more info)

这是因为您还需要在作用域中导入clap。此错误可以像这样解决

use xtask_wasm::clap;

#[derive(clap::Parser)]

或者像这样

use xtask_wasm::{clap, clap::Parser};

#[derive(Parser)]