mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
Gitlocalize: move translated files (#2218)
Co-authored-by: gitlocalize-app[bot] <55277160+gitlocalize-app[bot]@users.noreply.github.com>
This commit is contained in:
gitlocalize-app[bot]
GitHub
parent
e7009db6c2
commit
30b07cbc12
@ -0,0 +1,142 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: Set yourself up for success
|
||||
---
|
||||
|
||||
# 始める
|
||||
|
||||
## Rust
|
||||
|
||||
まずはじめにRustが必要です。Rustとビルドツールの`cargo`をインストールするために、以下の[公式サイト](https://www.rust-lang.org/tools/install)
|
||||
を見てください。
|
||||
|
||||
## **Wasm ビルドツール**
|
||||
|
||||
WebAssemblyとJavaScriptの互換を持たせるために他にツールが必要です。さらに、選んだツールに応じてブラウザでアプリから`.wasm`ファイルを実行するのに
|
||||
必要なJavaScriptラッパーのコードを生成し、これによってデプロイやパッケージ化での頭痛の種を軽減させるのに役立ちます。
|
||||
|
||||
### [**`wasm-pack`**](https://rustwasm.github.io/docs/wasm-pack/)
|
||||
|
||||
Rust / Wasm活動チームによって開発されているCLIツールで、WebAssemblyをパッケージ化することができます。
|
||||
Webpackには[`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin)が最もよく使われています。
|
||||
|
||||
[`wasm-pack`で始める](project-setup/using-wasm-pack.md)
|
||||
|
||||
### [**`wasm-bindgen`**](https://rustwasm.github.io/docs/wasm-bindgen/)
|
||||
|
||||
Rust/Wasm活動チームによって開発されているライブラリとCLIツールで、JS / WebAssemblyの互換性を持たせるための低レベルなツールです
|
||||
(`wasm-pack`で内部的に使われています)。
|
||||
`wasm-bindgen`は手書きのJavaScriptでWebAssemblyのバイナリを使う必要があるため、直接使うのは非推奨です。
|
||||
しかし、詳細な情報については[**`wasm-bindgen` ガイド**](https://rustwasm.github.io/docs/wasm-bindgen/)から得られます。
|
||||
|
||||
[`wasm-bindgen`で始める。](project-setup/using-wasm-bindgen.md)
|
||||
|
||||
### [**`cargo-web`**](https://github.com/koute/cargo-web)
|
||||
|
||||
`wasm-pack`と`wasm-bindgen`を導入する前は好まれたWebワークフローツールです。
|
||||
`wasm-pack`がサポートされていないサンプルを動かすのにインストールする価値があり、依然として**最もお手軽に**始められる方法です。
|
||||
|
||||
[`cargo web`で始める](project-setup/using-cargo-web.md)
|
||||
|
||||
### 比較
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ textAlign: "left" }}></th>
|
||||
<th style={{ textAlign: "left" }}><code>wasm-pack</code>
|
||||
</th>
|
||||
<th style={{ textAlign: "left" }}><code>wasm-bindgen</code>
|
||||
</th>
|
||||
<th style={{ textAlign: "left" }}><code>cargo-web</code>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>プロジェクトの進行状況</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/">Rust / Wasm活動チーム</a>により活発にメンテナンス
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/">Rust / Wasm 活動チーム</a>により活発にメンテナンス
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>6ヶ月間GitHubでの活発な活動無し</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>開発体験</td>
|
||||
<td style={{ textAlign: "left" }}>ほぼ大丈夫! <code>webpack</code>があればなお良い。</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>だいたい大丈夫。開発においては少し流れを書かないといけない。</td>
|
||||
<td style={{ textAlign: "left" }}>しっかり動く！完結していて、外部ライブラリに頼る必要無し。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>ローカルサーバー</td>
|
||||
<td style={{ textAlign: "left" }}><code>webpack</code>プラグインによるサポートあり</td>
|
||||
<td style={{ textAlign: "left" }}>サポート無し</td>
|
||||
<td style={{ textAlign: "left" }}>サポートあり</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>ローカル環境での変更による自動再ビルド</td>
|
||||
<td style={{ textAlign: "left" }}><code>webpack</code>プラグインによるサポートあり</td>
|
||||
<td style={{ textAlign: "left" }}>サポート無し</td>
|
||||
<td style={{ textAlign: "left" }}>サポートあり</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>ヘッドレスブラウザテスト</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/docs/wasm-pack/commands/test.html">サポートあり</a>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/index.html">サポートあり</a>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://github.com/koute/cargo-web#features">サポートあり</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>サポートされているターゲット</td>
|
||||
<td style={{ textAlign: "left" }}>
|
||||
<ul>
|
||||
<li><code>wasm32-unknown-unknown</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>
|
||||
<ul>
|
||||
<li><code>wasm32-unknown-unknown</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>
|
||||
<ul>
|
||||
<li><code>wasm32-unknown-unknown</code>
|
||||
</li>
|
||||
<li><code>wasm32-unknown-emscripten</code>
|
||||
</li>
|
||||
<li><code>asmjs-unknown-emscripten</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}><code>web-sys</code></td>
|
||||
<td style={{ textAlign: "left" }}>互換性あり</td>
|
||||
<td style={{ textAlign: "left" }}>互換性あり</td>
|
||||
<td style={{ textAlign: "left" }}>互換性無し</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}><code>stdweb</code></td>
|
||||
<td style={{ textAlign: "left" }}>互換性あり</td>
|
||||
<td style={{ textAlign: "left" }}>互換性あり</td>
|
||||
<td style={{ textAlign: "left" }}>互換性あり</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>使用例</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://github.com/yewstack/yew-wasm-pack-minimal">入門用テンプレート</a>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>
|
||||
Yewで<a href="https://github.com/yewstack/yew/blob/master/examples/build.sh">作る例</a>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>
|
||||
Yewで<a href="https://www.github.com/yewstack/yew/tree/master/packages/yew-stdweb/examples">作る例</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -0,0 +1,138 @@
|
||||
---
|
||||
description: 为成功做好准备
|
||||
---
|
||||
|
||||
# 项目设置
|
||||
|
||||
## Rust
|
||||
|
||||
首先 ，你需要安装 Rust 。如何安装 Rust 和 `cargo` 构建工具，请参考[官方说明](https://www.rust-lang.org/tools/install)。
|
||||
|
||||
## **Wasm 构建工具**
|
||||
|
||||
需要安装额外的工具以方便 WebAssembly 与 JavaScript 间的相互操作。此外，根据你选择的工具，他们可以生成所有必需的 JavaScript 包装代码来让你的应用程序中的 `.wasm` 文件运行在浏览器中，从而帮助减轻部署和打包的麻烦。
|
||||
|
||||
### [**`wasm-pack`**](https://rustwasm.github.io/docs/wasm-pack/)
|
||||
|
||||
一个由 Rust / Wasm 工作组开发的用于打包 WebAssembly 的 CLI 工具。与 Webpack 的 [`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin) 插件搭配使用最佳。
|
||||
|
||||
[开始使用 wasm-pack](project-setup/using-wasm-pack.md)
|
||||
|
||||
### [**`wasm-bindgen`**](https://rustwasm.github.io/docs/wasm-bindgen/)
|
||||
|
||||
同时是一个库和一个 CLI 工具，也是由 Rust / Wasm 工作组开发。它是一个促进 JS 和 WebAssembly 之间互操作性的底层工具（在 `wasm-pack` 内部被用到）。我们不建议直接使用 `wasm-bindgen` 因为它需要手写一些 JavaScript 代码来引导你的 WebAssembly 二进制程序。但是，直接使用它也是可能的并且可以在 [**`wasm-bindgen` 指南**](https://rustwasm.github.io/docs/wasm-bindgen/) 上找到更多信息。
|
||||
|
||||
[开始使用 wasm-bindgen](project-setup/using-wasm-bindgen.md)
|
||||
|
||||
### [**`cargo-web`**](https://github.com/koute/cargo-web)
|
||||
|
||||
在 `wasm-pack` 和 `wasm-bindgen` 被介绍前的首选 web 工作流工具。它仍然是**最快捷**的启动和运行方式，值得安装以运行尚未迁移到支持 `wasm-pack` 的示例程序。
|
||||
|
||||
[开始使用 cargo-web](project-setup/using-cargo-web.md)
|
||||
|
||||
### 对比
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ textAlign: "left" }}></th>
|
||||
<th style={{ textAlign: "left" }}><code>wasm-pack</code>
|
||||
</th>
|
||||
<th style={{ textAlign: "left" }}><code>wasm-bindgen</code>
|
||||
</th>
|
||||
<th style={{ textAlign: "left" }}><code>cargo-web</code>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>项目状态</td>
|
||||
<td style={{ textAlign: "left" }}>由 <a href="https://rustwasm.github.io/">Rust / Wasm 工作组</a>积极维护</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>由 <a href="https://rustwasm.github.io/">Rust / Wasm 工作组</a>积极维护</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>超过六个月没有 Github 活动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>开发体验</td>
|
||||
<td style={{ textAlign: "left" }}>接近完美！需要 <code>webpack</code> 以获得最佳体验。</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>比较基础。你需要编写一些脚本来简化你的开发体验。</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>管用！自带“电池”，不需要外部依赖。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>本地服务器</td>
|
||||
<td style={{ textAlign: "left" }}>通过 <code>webpack</code> 插件支持</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>不支持</td>
|
||||
<td style={{ textAlign: "left" }}>支持</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>根据本地更改自动重新构建</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>通过 <code>webpack</code> 插件支持</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>不支持</td>
|
||||
<td style={{ textAlign: "left" }}>支持</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>无头浏览器测试</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/docs/wasm-pack/commands/test.html">支持</a>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/index.html">支持</a>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://github.com/koute/cargo-web#features">支持</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>支持生成的目标代码</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>
|
||||
<ul>
|
||||
<li><code>wasm32-unknown-unknown</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>
|
||||
<ul>
|
||||
<li><code>wasm32-unknown-unknown</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>
|
||||
<ul>
|
||||
<li><code>wasm32-unknown-unknown</code>
|
||||
</li>
|
||||
<li><code>wasm32-unknown-emscripten</code>
|
||||
</li>
|
||||
<li><code>asmjs-unknown-emscripten</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}><code>web-sys</code>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>兼容</td>
|
||||
<td style={{ textAlign: "left" }}>兼容</td>
|
||||
<td style={{ textAlign: "left" }}>不兼容</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}><code>stdweb</code>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>兼容</td>
|
||||
<td style={{ textAlign: "left" }}>兼容</td>
|
||||
<td style={{ textAlign: "left" }}>兼容</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>示例用法</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://github.com/yewstack/yew-wasm-pack-minimal">新手模板</a>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>Yew 示例程序的<a href="https://github.com/yewstack/yew/blob/master/examples/build_all.sh">构建脚本</a>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>Yew 示例程序的<a href="https://github.com/yewstack/yew/blob/master/examples/build_all.sh">构建脚本</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -0,0 +1,137 @@
|
||||
---
|
||||
description: Set yourself up for success
|
||||
---
|
||||
|
||||
# 專案設定
|
||||
|
||||
## Rust
|
||||
|
||||
首先，你的電腦裡必須要安裝 Rust。請參考[官網的教學](https://www.rust-lang.org/tools/install)安裝 Rust 與 `cargo` 這個套件管理工具。
|
||||
|
||||
## **Wasm 編譯工具**
|
||||
|
||||
我們需要額外的工具來增加 WebAssembly 與 JavaScript 的互操作性。此外，根據你選擇的工具，他們可以產生當你的應用程式運行在瀏覽器時， `.wasm` 檔案所需要的 JavaScript 程式碼，減少佈署與打包的麻煩。
|
||||
|
||||
### [**`wasm-pack`**](https://rustwasm.github.io/docs/wasm-pack/)
|
||||
|
||||
一套 CLI 工具，由 Rust/Wasm Working Group 為了編譯並打包 WebAssembly 所開發的。最好與 Webpack 的 [`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin) 搭配使用。
|
||||
|
||||
[開始使用 wasm-pack](project-setup/using-wasm-pack.md)
|
||||
|
||||
### [**`wasm-bindgen`**](https://rustwasm.github.io/docs/wasm-bindgen/)
|
||||
|
||||
同時是套件，也是 CLI 工具，並由 Rust / Wasm Working Group 開發。他是一套較底層的工具（通常是 `wasm-pack` 內部使用），用以增加 JavaScript 與 WebAssembly 的互操作性。我們不建議直接使用 `wasm-bindgen`，因為你需要多寫一些 JavaScript 的程式碼來引入你的 WebAssembly 二進位檔案。雖然如此，你仍然可以使用 wasm-bindgen，更多資訊請參考 [**`wasm-bindgen` guide**](https://rustwasm.github.io/docs/wasm-bindgen/)**。**
|
||||
|
||||
[開始使用 wasm-bindgen](project-setup/using-wasm-bindgen.md)
|
||||
|
||||
### [**`cargo-web`**](https://github.com/koute/cargo-web)
|
||||
|
||||
在 `wasm-pack` 與 `wasm-bindgen` 出來之前，這是我們的首選工具。在安裝與執行方面，他的速度仍是最快的，我們推薦你安裝他去執行我們的那些還沒有使用 `wasm-pack` 的範例。
|
||||
|
||||
[開始使用 cargo-web](project-setup/using-cargo-web.md)
|
||||
|
||||
### 比較
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ textAlign: "left" }}></th>
|
||||
<th style={{ textAlign: "left" }}><code>wasm-pack</code>
|
||||
</th>
|
||||
<th style={{ textAlign: "left" }}><code>wasm-bindgen</code>
|
||||
</th>
|
||||
<th style={{ textAlign: "left" }}><code>cargo-web</code>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>專案狀態</td>
|
||||
<td style={{ textAlign: "left" }}>持續由 <a href="https://rustwasm.github.io/">Rust / Wasm Working Group</a> 維護中</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>持續由 <a href="https://rustwasm.github.io/">Rust / Wasm Working Group</a> 維護中</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>GitHub Repo 已經六個月以上沒有動靜了</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>開發體驗</td>
|
||||
<td style={{ textAlign: "left" }}>還可以，需要搭配 Webpack</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>太過底層，你需要寫一腳本來優化開發體驗</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>可以動！另外無需外部套件支援</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>本地端的伺服器 (Local Server)</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>搭配 <code>webpack</code> 插件</td>
|
||||
<td style={{ textAlign: "left" }}>不支援</td>
|
||||
<td style={{ textAlign: "left" }}>支援</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>當檔案被更動，自動重編譯</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>搭配 <code>webpack</code> 插件</td>
|
||||
<td style={{ textAlign: "left" }}>不支援</td>
|
||||
<td style={{ textAlign: "left" }}>支援</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>無頭瀏覽器測試</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/docs/wasm-pack/commands/test.html">Supported</a>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/index.html">Supported</a>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://github.com/koute/cargo-web#features">Supported</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>支援的目標程式碼</td>
|
||||
<td
|
||||
style={{ textAlign: "left" }}>
|
||||
<ul>
|
||||
<li><code>wasm32-unknown-unknown</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>
|
||||
<ul>
|
||||
<li><code>wasm32-unknown-unknown</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>
|
||||
<ul>
|
||||
<li><code>wasm32-unknown-unknown</code>
|
||||
</li>
|
||||
<li><code>wasm32-unknown-emscripten</code>
|
||||
</li>
|
||||
<li><code>asmjs-unknown-emscripten</code>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}><code>web-sys</code>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>相容</td>
|
||||
<td style={{ textAlign: "left" }}>相容</td>
|
||||
<td style={{ textAlign: "left" }}>不相容</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}><code>stdweb</code>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>相容</td>
|
||||
<td style={{ textAlign: "left" }}>相容</td>
|
||||
<td style={{ textAlign: "left" }}>相容</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ textAlign: "left" }}>範例用法</td>
|
||||
<td style={{ textAlign: "left" }}><a href="https://github.com/yewstack/yew-wasm-pack-minimal">新手模板</a>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>Yew 範例的<a href="https://github.com/yewstack/yew/blob/master/examples/build_all.sh">編譯腳本</a>
|
||||
</td>
|
||||
<td style={{ textAlign: "left" }}>Yew 範例的<a href="https://github.com/yewstack/yew/blob/master/examples/build_all.sh">編譯腳本</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
Loading…
x
Reference in New Issue
Block a user