《包裹与锈迹：一部WASM浪漫喜剧》

介绍

第一部分：“未实现的愿望”

第二部分：“邂逅”

第三部分：“快乐在一起”

第四部分：“障碍出现”

第五部分：“旅程”

第六部分：“新的障碍”

第七部分：“选择”

第八部分：“危机”

第九部分：“顿悟”

第十部分：“决议”

结论

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

Web Assembly (WASM) 和 Rust 在过去几年中不断发展壮大，那么将它们一起使用感觉如何呢？

介绍

我一直想尝试使用 Rust 和 WASM，原因有很多：打包体积小、底层访问可靠且性能优异，以及 Rust 本身的所有优势（强大的类型安全、零成本抽象等等）。所以，当有机会利用两周的非项目时间学习 Rust 和 WASM 时，我没有任何理由不尝试一下！

接下来的两周左右，我的编程经历可谓跌宕起伏，相信所有程序员都经历过不少次。但当我准备把这些经历写成文章时，我发现其中存在某种规律，这可不是普通的过山车……它的结构简直完美契合了浪漫喜剧！所以，为了解释和分析这个非官方支持的 Web 应用打包工具和系统编程语言的组合，我们将采用标准的十集浪漫喜剧模式，既保证了结构清晰，也增添了一些喜剧元素。

第一部分：“未实现的愿望”

我选择使用 Rust 和 WASM 的另一个原因是它们当时很新潮，而且能把 Rust 程序连接到一个漂亮的 Web 界面也很不错。但问题是，Rust 和 WASM 官方只支持 Webpack 作为打包工具。对我来说，Webpack就像浪漫喜剧里的前任，我们之间从来没有过美好的感情，也永远无法走到一起。但是，为了用我曾经挚爱的 Rust 开发出一些东西，似乎不得不接受这个“必要之恶”。

第二部分：“邂逅”

于是，我极不情愿地开始克隆 Rust WASM Webpack 模板，脑海中突然闪过之前一个项目，看着自己和 Webpack 苦苦挣扎，试图编译一个单页应用 (SPA)。依赖列表随着插件数量的增加而不断增长。我疯狂地按着 Ctrl + C，心想：“不，肯定还有别的办法。”就在这时，我灵光一闪：“Parcel！我记得它好像提到过 WASM？”我一边想着，一边迅速打开Parcel 的网站，果然找到了！这就是我一直在寻找的东西！简单试用之后npm install，我彻底被它征服了。

第三部分：“快乐在一起”

稍等npm init片刻npm install -D parcel-bundler，一切就绪。Parcel 开箱即用地支持在 JS 和 TS 中导入 .rs 文件，因此我在一个简单的 HTML5 样板代码中，使用 main.js 文件实现了这一点。Rust 文件包含一个简单的函数，该函数接收两个数字作为参数，返回它们的和。我还添加了一些 Rust 代码来告诉编译器不要修改函数名，就大功告成了！JS 调用这个函数并将结果显示在 DOM 中。这是一个简单的示例，但它似乎包含了所有我需要的东西……

第四部分：“障碍出现”

但是，就像大多数浪漫喜剧一样，总会遇到一些小问题，让这段感情出现裂痕。对于 Rust 和 Parcel 来说，问题出在函数中返回或接受字符串上。无论我怎么尝试，都行不通，控制台里总是充斥着大量的 undefined 信息。虽然看起来似乎有解决办法，但广受支持的“wasm_bindgen”包为 Rust 和 JS 之间的缺失提供了一个 polyfill！所以，创建一个包含 cargo.toml 的 Rust 项目，添加 wasm_bindgen crate，导入并运行……等等。Parcel 似乎无法与 wasm_bindgen 兼容，即使使用了GitHub 问题中有人提到的插件作为解决方案……现在该怎么办？

第五部分：“旅程”

经过几分钟的疯狂谷歌搜索，以及对 GitHub issues 和各种博客教程的快速浏览，我找到了一个替代包：stdweb。它似乎拥有 wasm_bindgen 的大部分功能，并且还有一个方便的教程，教你如何将其与 Parcel 集成！快速地在 cargo.toml 文件中切换包，稍作代码调整，我们就恢复了正常，在这个简单的应用程序中可以收发字符串了。是时候开始做一些稍微复杂一点的东西了……一个简单的遗传算法模拟器！

第六部分：“新的障碍”

好了，新项目开始了，Parcel 已经安装，Rust 模块也创建好了，stdweb 也安装好了，让我们开始吧！我的想法很简单：用 Rust 创建一个结构体来表示遗传算法模拟，添加一些方法来获取种群或模拟一代，然后在 JS 中实例化并使用它。应该不难吧（伏笔）！我们先创建结构体，看起来在 JS 中可以实例化，然后我们再添加一些方法……等等……什么？看来在使用 stdweb 和 Parcel 时，导出结构体非常不稳定，难道我又回到原点了吗？

第七部分：“选择”

一切似乎都完了，我已经找不到任何可用的 Rust 包了，控制台也全是错误信息，难道真的无计可施了吗？我抱着最后一丝希望，尝试手动编译 .wasm 文件并导入，但修改了五次 Rust 文件后，我已经感到无比厌烦……我在 GitHub 上浏览了一个又一个 issue，发现 webpack 总是被反复提及，也许我真的应该放弃，放弃使用 webpack 了。

第八部分：“危机”

妈的，看来我得用 Webpack 了，我一边想着一边回到开头，打开 Webpack Rust 模板，彻底泄气了。

第九部分：“顿悟”

Webpack Rust 模板仓库克隆失败后，我最后一次求助于 Google，用了我以前搜索过的关键词，希望能找到奇迹。等等，这是什么？GitHub 上出现了一个关于 Parcel 和 WASM_Bindgen 的问题，之前明明没有的！Google 搜索索引是不是刚刚才发现它与此相关？等等，有人在这里分享了一个 Rust、WASM_Bindgen 和 Parcel 的模板！感谢搜索引擎之神，这个项目或许还有救！

第十部分：“决议”

它就在那里，一直就在我眼皮底下，在rustwasm 的 GitHub 仓库里。我迅速克隆了仓库，按照设置说明操作，一切都完美运行。最终，这次寻找就像一个真正的灰姑娘故事，在午夜钟声敲响之际找到了完美的匹配。
现在，是时候用它做点酷炫的东西了！我不想把太多精力放在前端和繁琐的 SCSS 代码上，所以我求助于一位老朋友：TailWindCSS，一个实用至上的 CSS 框架，我之前用 PostCSS 和 Parcel 搭建过它。一切就绪后，我构建了一个简单的布局，侧边栏用于配置模拟，主面板用于显示模拟结果。确定了页面的外观和风格后，我开始编写一些 TypeScript 组件来控制和显示模拟结果。

最后，在用一些简单的模拟数据搭建并运行好网站后，set_interval我开始将其与 WASM 连接起来。结果出奇地简单，只需module从 Rust 项目导入对象，cargo.toml然后所有结构体和函数就都附加到它上面了！经过一些小的调整和测试，你猜怎么着，一切运行正常，并且正在收敛！稍微清理一下，然后我把它部署到Firebase上，从此以后它就一直稳定运行了。

结论

用这种风格写这篇文章挺有意思的，还能聊聊我真心享受其中的每一分钟，以及每一个起伏。但是，使用 Rust 和 Parcel 到底是什么感觉呢？我可以毫不夸张地说，这真是一种享受……前提是你找到了合适的资源。Parcel 让一切变得如此简单，大多数项目几乎不需要任何配置。虽然在大型项目中速度可能稍慢一些，但十有八九都能与那些性能强劲的框架一较高下！

至于 Rust 和 WASM，它完全超出了我的预期。Rust 一直是我非常喜欢的编程语言，虽然它很有挑战性，但永远不会让我感到厌倦。然而，如果非要挑剔的话，那就是导出的 JS 模块缺少智能感知功能。当你编写的 Rust 文件很小，需要编译的时候，这可能不是问题，但我可以预见，在使用 Rust、WASM 和 Parcel 的大型项目中，这会非常麻烦。

总之，如果你曾经有过想尝试 Rust 或 WASM 的想法，我强烈推荐你尝试一下，或许可以考虑使用 Parcel 来避免我为了完成它而经历的情绪过山车！