“包裹与铁锈”：一部WASM浪漫喜剧

Web Assembly(WASM)和Rust在过去的几年里一直在成长和发展，那么将它们一起使用会是什么感觉呢？

我想使用Rust和WASM已经有一段时间了，原因有很多：捆绑包小、具有可靠性能的低级访问，以及Rust带来的所有好处(强类型安全、零成本抽象等)。所以，当我得到两周的项目外学习机会时，没有理由不尝试一下Rust和WASM！接下来的两周左右对我来说就像是编程过山车，所有程序员都经历过很多次。但当我为这篇文章写下我的经历时，我注意到有一个模式，这种经历不是任何过山车般的…。它完美地映射了一部浪漫喜剧的结构！因此，为了解释和分析官方不支持的web应用程序捆绑器和系统编程语言的配对，我们将遵循标准的10部分romcom格式，在结构上和一些喜剧效果上有所缓解。

我想使用Rust和WASM的另一个原因是因为它是新的和闪亮的，再加上将Rust程序连接到一个很好的Web界面会很好。一个问题是，铁锈和瓦斯米只有在webpack作为捆绑者的情况下才得到官方支持。对我来说，webpack是一部浪漫喜剧中的前任，从来都不是一段很好的关系，我们永远不会相处得很好。但是，它似乎是一个必要的邪恶，以达到我的目标，利用我失去的爱，铁锈。

因此，我不情愿地开始克隆铁锈水webpack模板，因为我被闪回到以前的项目，看着自己与webpack争斗，试图编译一个单页应用程序(Single Page App)。每个插件的依赖项列表都在增加。我垃圾邮件Ctrl+C，“不，一定有别的东西”，我想。我突然想到，“包裹！我记得它说过一些关于WASM的事情？“。我想，当我快速导航到Parcel网站时，它就在那里，这就是我一直在寻找的东西，在快速安装了NPM之后，我就如痴如醉了。

一个NPM初始化和NPM安装-D包裹捆绑器之后，我们就出发去比赛了。Parcel支持以开箱即用的方式导入JS和TS中的.rs文件，所以在带有main.js的简单HTML5样板中，我就可以做到这一点。Rust文件包含一个简单的函数，当给定2个数字时，它返回它们的总和，一些额外的Rust告诉编译器不要损坏函数名，这样就完成了！JS调用此函数并在DOM中显示输出，这是一个简单的示例，但这似乎包含了我需要的一切…。

但是，就像大多数浪漫喜剧一样，道路上的颠簸会让这段关系产生疑问。对于Rust和Parcel，此问题是在函数中返回或接受字符串。无论我做什么，它都不会起作用，未知的信息流会困扰着我的控制台。虽然似乎有一个解决方案，但是支持良好的“wasm_bindgen”包为Rust和JS之间缺少的东西提供了一种填充！因此，使用cargo.toml创建一个Rust项目，添加wasm_bingen机箱，导入并运行…。哦，等等。Parcel似乎不能与wasm_bindgen一起工作，即使是在GitHub问题上有人引用的插件作为解决方案……现在怎么办？

在疯狂地搜索和浏览了几分钟GitHub问题和博客上的各种教程之后，我找到了另一个包，stdweb。似乎具有wasm_bindgen的大部分功能，并提供了如何使用Parcel设置它的便捷教程！快速切换cargo.toml中的包，进行一些轻微的代码调整，我们又回到了在这个简单的应用程序中返回和接收字符串的轨道上。是时候开始制作稍微复杂一点的东西了……一个简单的遗传算法模拟器！

好的，那么新的项目，包裹安装，铁锈模块创建，stdweb安装，让我们让这个节目上路吧！我的想法很简单，在Rust中创建一个结构来表示遗传算法仿真，在其中添加一些方法来获得种群或模拟一个世代，然后简单地实例化并在JS中使用它。肯定不会太难(埋下伏笔)！让我们只制作结构，看起来在JS中是实例化的，让我们在结构…上添加一些方法。等等……什么？在使用stdweb和parcel时，导出structs似乎充其量是喜怒无常的，我已经回到正题了吗？

一切似乎都失败了，我没有可用的铁锈包来尝试让一个充满错误的控制台，难道我什么也做不了吗？在最后的努力中，我尝试了自己手动编译.wasm文件并将其导入，但在对rust文件进行了5次编辑之后，我已经可以感觉到这变得单调乏味了…。当我在GitHub问题之后爬过GitHub问题时，webpack一次又一次地提出解决方案，也许我需要接受失败并回去。

F@$%我将不得不使用webpack，我想当我回到起点打开webpack生锈模板时，被击败了。

作为webpack生锈模板回购的克隆人，我最后一次使用我以前的搜索引擎去谷歌，希望能出现奇迹。等等，这是什么？GitHub关于Parcel和WASM_Bindgen的问题以前没有吗？谷歌搜索索引一定是刚刚发现这是相关的吧？请稍等，有人在此链接了Rust、WASM_BINDGEN和Parcel的模板！感谢搜索引擎上帝，项目可能会被保存！

它就在那里，就在我的眼皮底下，一直在rustwasm GitHub存储库上。我迅速克隆了回购，并按照设置说明进行了操作，一切都工作得无懈可击。最终，这次搜寻变成了一个真正的灰姑娘故事，在午夜钟声敲响的钟声中找到了完美的配对。所以，现在，是时候让它变得更酷了！我不想把太多的注意力放在前端，过分依赖SCSS让它看起来更漂亮，所以我求助于一个老朋友：TailWindCSS，这是我以前用PostCSS和Parcel建立的一个实用程序优先的CSS框架。在完成所有这些工作之后，我构建了一个简单的布局，其中包含一个用于配置模拟的侧面板和一个用于保存模拟结果的主面板。在确定了页面的外观之后，我开始制作一些文字脚本组件来控制和显示模拟。最后，在使用来自简单的set_interval的一些模拟数据启动并运行站点之后，我开始将其连接到WASM。结果非常简单，只需从Rust项目的cargo.toml导入模块对象，然后所有的结构和函数都附加到它！一些小的调整和测试，你知道吗，它都在工作和汇聚！稍微清理一下，然后我把它部署到FireBase上，然后它就可以快乐地托管了。

现在，这篇文章以这种风格写作，并谈论了一个我真正享受到的每一分钟、每一次上下的项目，这是一件很有趣的事情。但是，使用铁锈和包裹到底是什么样的呢？我可以全心全意地说，这是一种真正的荣幸……只要你找到合适的资源。Parcel让它变得如此简单，大多数项目都不需要配置，尽管它在大型项目上可能不会那么快，但它会让大公司的钱花上9/10倍！至于Rust和WASM，这是我所期待的一切，甚至更多。铁锈一直是我热爱编程的语言，虽然它是一个挑战，但它永远不会过时。然而，如果我要抱怨这种体验中的一件事，那就是导出的JS模块上缺乏智能感知(IntelliSense)。当您编写正在编译的小Rust文件时，这可能不是问题，但我可以看到，在使用Rust、WASM和Parcel.dll的大型项目中，这可能不是一个问题。总之，如果您曾经有过一个小小的声音告诉您尝试一下Rust或WASM，我会强烈推荐它，也许可以考虑使用Parcel来避免我后来完成它时的情绪过山车！