mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
b246e0d5ed
* tree-wide: update links to https://rustwasm.github.io/wasm-bindgen https://rustwasm.github.io/wasm-bindgen -> https://wasm-bindgen.github.io/wasm-bindgen https://rustwasm.github.io/docs/wasm-pack -> https://drager.github.io/wasm-pack/book/ https://rustwasm.github.io/wasm-pack -> https://github.com/drager/wasm-pack
55 lines
6.3 KiB
Plaintext
55 lines
6.3 KiB
Plaintext
---
|
||
title: 项目设置
|
||
sidebar_label: 介绍
|
||
description: 为成功做好准备
|
||
---
|
||
|
||
## Rust
|
||
|
||
首先 ，你需要安装 Rust 。如何安装 Rust 和 `cargo` 构建工具，请参考[官方说明](https://www.rust-lang.org/tools/install)。
|
||
|
||
此外，为了将 Rust 编译为 Wasm，您还需要安装`wasm32-unknown-unknown`。如果你使用的是 rustup，只需运行`rustup target add wasm32-unknown-unknown` 。
|
||
|
||
:::important
|
||
Yew 支持的最低 Rust 版本 (MSRV) 是`1.49.0` 。旧版本可能会导致意外问题，并伴有难以理解的错误消息。你可以使用 `rustup show` （在“active toolchain”下）或 `rustc --version`检查您的工具链版本。要更新您的工具链，请运行`rustup update` 。
|
||
:::
|
||
|
||
## **Wasm 构建工具**
|
||
|
||
需要安装额外的工具以方便 WebAssembly 与 JavaScript 间的相互操作。此外，根据你选择的工具，他们可以生成所有必需的 JavaScript 包装代码来让你的应用程序中的 `.wasm` 文件运行在浏览器中，从而帮助减轻部署和打包的麻烦。
|
||
|
||
### [**`trunk`**](https://github.com/thedodd/trunk/)
|
||
|
||
一个实际是为了构建 Yew 应用程序的而制作的工具。它可以构建任何基于`wasm-bindgen`的应用程序，其设计灵感来自 rollup.js。使用 Trunk，您无需安装 Node.js 或接触任何 JavaScript 代码。它可以将资源（assets）绑定到的你的应用程序，甚至附带 Sass 编译器。
|
||
|
||
我们所有的示例都基于 Trunk 构建。
|
||
|
||
[开始使用 `trunk`](project-setup/using-trunk.mdx)
|
||
|
||
### [**`wasm-pack`**](https://drager.github.io/wasm-pack/book/)
|
||
|
||
由 Rust / Wasm 工作组开发的用于打包 WebAssembly 的 CLI 工具。最好与[`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin)一起使用。 `wasm-pack`的主要目的是构建用于 JavaScript 的 Wasm 库。因此，它只能构建库，不提供开发服务器或自动重建等有用工具。
|
||
|
||
[开始使用 `wasm-pack`](project-setup/using-wasm-pack.mdx)
|
||
|
||
### [**`cargo-web`**](https://github.com/koute/cargo-web)
|
||
|
||
在`wasm-bindgen`创造之前，可以称之为首选的最佳工具。
|
||
|
||
[开始使用 `cargo web`](project-setup/using-cargo-web.mdx)
|
||
|
||
### 对比
|
||
|
||
| | `trunk` | `wasm-pack` | `cargo-web` |
|
||
| ------------------------ | -------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||
| 项目状态 | 积极维护 | [由 Rust / Wasm 工作组](https://rustwasm.github.io)积极维护 | 超过 6 个月没有 Github 活动 |
|
||
| 开发体验 | 开箱即用！无需任何外部依赖。 | 比较基础。你需要编写一些脚本来简化你的开发体验或者使用 webpack 插件版本。 | 适用于代码层面，但需要单独的资产通道。 |
|
||
| 本地服务器 | 支持 | 仅限 webpack 插件版本 | 支持 |
|
||
| 根据本地更改自动重新构建 | 支持 | 仅限 webpack 插件版本 | 支持 |
|
||
| 资源处理 | 支持 | 仅限 webpack 插件版本 | 仅限静态资源 |
|
||
| 无头浏览器测试 | [开发中](https://github.com/thedodd/trunk/issues/20) | [支持](https://github.com/drager/wasm-pack/book/commands/test.html) | [支持](https://github.com/koute/cargo-web#features) |
|
||
| 支持生成的目标代码 | <ul><li><code>wasm32-unknown-unknown</code></li></ul> | <ul><li><code>wasm32-unknown-unknown</code></li></ul> | <ul> <li><code>wasm32-unknown-unknown</code></li> <li><code>wasm32-unknown-emscripten</code></li> <li><code>asmjs-unknown-emscripten</code></li> </ul> |
|
||
| `web-sys` | 兼容 | 兼容 | 不兼容 |
|
||
| `stdweb` | 不兼容 | 兼容 | 兼容 |
|
||
| 示例用法 | <a href="https://github.com/yewstack/yew-wasm-pack-minimal">简单的示例</a> | [新手模板](https://github.com/yewstack/yew-wasm-pack-minimal) | `yew-stdweb` 示例程序的[构建脚本](https://www.github.com/yewstack/yew/tree/master/packages/yew-stdweb/examples) |
|