Rust 编译为WebAssembly 在前端项目中使用( 三 ) _Rust

cargo build --target wasm32-unknown-unknown如果未安装对应的库，控制台会给出提示。

文章插图
图片
那我们就照猫画虎的操作一下：
rustup target add wasm32-unknown-unknown?

cargo build: 这是 Cargo 工具的命令，用于构建 Rust 项目。它会编译项目的源代码并生成可执行文件或库文件，具体取决于项目的类型。
--target wasm32-unknown-unknown: 这部分是构建的目标参数。--target 标志用于指定要构建的目标平台。在这里，wasm32-unknown-unknown 是指定了 WebAssembly 目标平台。这告诉 Cargo 生成「适用于 WebAssembly 的二进制文件」，而不是生成本地平台的二进制文件。

当运行这个命令后， Cargo 会使用 Rust 编译器（Rustc）以及与 WebAssembly 相关的工具链，将 Rust 代码编译为 WebAssembly 格式的二进制文件。这个生成的 Wasm 文件可以在浏览器中运行，或与其他支持 WebAssembly 的环境一起使用。
运行结果如下：
cargo build --target wasm32-unknown-unknown 命令的「默认输出位置」是在项目的 target 目录下，具体位置是：
target/wasm32-unknown-unknown/debug/在这个目录下，我们会找到生成的 WebAssembly 文件（通常是一个 .wasm 文件），以及其他与编译过程相关的文件。

文章插图
图片
2.6 构建Web服务器既然，我们通过上述的魔法，将Rust程序编译为了可以在浏览器环境下引用执行的格式。「为了这口醋，我们还专门包顿饺子」。
我们需要一个Web服务器来测试我们的WebAssembly程序。我们将使用Webpack，我们需要创建三个文件：index.js、package.json和webpack.config.js 。
下面的代码，我们最熟悉不过了，就不解释了。
index.js

// 直接引入了，刚才编译后的文件const rust = import('./pkg/hello_world.js');rust.then(m => m.helloworld('World!')).catch(console.error);

package.json

{"scripts": {"build": "webpack","serve": "webpack-dev-server"},"devDependencies": {"@wasm-tool/wasm-pack-plugin": "0.4.2","text-encoding": "^0.7.0","html-webpack-plugin": "^3.2.0","webpack": "^4.29.4","webpack-cli": "^3.1.1","webpack-dev-server": "^3.1.0"}}

webpack.config.js

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const webpack = require('webpack');const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");module.exports = {entry: './index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'index.js',},plugins: [new HtmlWebpackPlugin(),new WasmPackPlugin({crateDirectory: path.resolve(__dirname, ".")}),// 让这个示例在不包含`TextEncoder`或`TextDecoder`的Edge浏览器中正常工作 。new webpack.ProvidePlugin({TextDecoder: ['text-encoding', 'TextDecoder'],TextEncoder: ['text-encoding', 'TextEncoder']})],mode: 'development'};

【Rust 编译为WebAssembly 在前端项目中使用】安装指定的依赖。

npm install webpack --save-devnpm install webpack-cli --save-devnpm install webpack-dev-server --save-devnpm install html-webpack-plugin --save-devnpm install @wasm-tool/wasm-pack-plugin --save-devnpm install text-encoding --save-dev

2.7 构建&运行程序使用npm run build构建程序。
使用npm run serve运行Hello World程序
在浏览器中打开localhost:8080,我们将看到一个显示 Hello World! 的弹窗。

文章插图
图片
到目前为止，我们已经构建了一个wasm并且能够和js实现功能交互的项目。其实，到这里已经完成了，我们这篇文章的使命。但是，在这里戛然而止，感觉缺失点啥。所以，我们继续深挖上面的项目的实现原理。
3. 原理探析在使用cargo和wasm_bindgen编译源代码时，会在pkg文件中「自动生成」以下文件：