WebAssembly入门：WebAssembly入门

WebAssembly承诺提供一种全新的网络-为用户提供更佳的性能，并为开发人员提供更大的灵活性。 开发人员可以使用多种语言（C，TypeScript，Rust，Ruby，Python）进行选择，而不必局限于使用JavaScript作为客户端网络交互的唯一语言，而是可以使用最舒适的一种语言进行开发。用。

最初，创建WebAssembly（或简称WASM）的唯一方法是使用Emscripten工具链将C / C ++代码编译为WebAssembly。 如今，开发人员不仅拥有更多的语言选择，而且以更少的介入步骤将这些其他语言直接编译为WebAssembly变得更加容易。

[ WebAssembly的下一步 。 • 8个使WebAssembly发挥作用的项目 。 | 通过InfoWorld的App Dev Report新闻通讯了解编程方面的热门话题。 ]

在本篇文章中，我们将研究在Web应用程序中实现WebAssembly组件所需的步骤。 由于WebAssembly尚在开发中，因此步骤高度依赖于您使用的语言，并且工具链可能会保持一段时间的变化。 但是现在，可以使用多种语言编写和部署有用的WebAssembly应用程序（如果需要的话）。

部署WebAssembly应用程序的第一步是选择一种可以编译为WebAssembly的语言作为目标。 您很有可能将您在生产中使用的至少一种主要语言转换为WebAssembly，或者拥有可以发出WebAssembly的编译器。

以下是领跑者：

• C.显然。 将C代码转换为WebAssembly的典型方法是通过Emscripten ，因为C到Emscripten到WebAssembly是第一个出现的WebAssembly工具链。 但是其他工具正在出现。 整个编译器Cheerp专门用于从C / C ++代码生成WebAssembly应用程序。 Cheerp还可以定位JavaScript，asm.js或上述任意组合。 也可以使用Clang工具链来构建WebAssembly有效负载，尽管该过程仍然需要大量的手动提升。 （ 这是一个示例 。）
• 锈。 Mozilla的系统编程语言设计得既安全又快速，是原生 WebAssembly支持的主要候选者之一。 Rust工具链的扩展使您可以直接从Rust代码编译为WebAssembly 。 您需要使用Rust的nightly工具链来执行WebAssembly编译，因此此功能现在应该被认为是实验性的。
• TypeScript 。 默认情况下，TypeScript编译为JavaScript，这意味着可以依次将其编译为WebAssembly。 AssemblyScript项目减少了涉及的步骤数，从而允许将严格类型的TypeScript编译为WebAssembly。

其他几种语言也开始以WebAssembly为目标，但它们处于起步阶段。 可以使用以下语言来构建WebAssembly组件，但只能使用比C，Rust和TypeScript更为有限的方式：

• D． D语言最近增加了对直接编译和链接到WebAssembly的支持。
• Java 。 可以通过TeaVM项目将Java字节码提前编译为WebAssembly。 这意味着任何发出Java字节码的语言都可以编译为WebAssembly，例如Kotlin，Scala或Clojure。 但是，许多无法在WebAssembly中有效实现的Java API受到限制，例如反射和资源API，因此TeaVM（以及WebAssembly）仅用于基于JVM的应用程序的子集。
• a 与JavaScript一样，Lua脚本语言作为嵌入式语言的使用历史悠久。 但是，将Lua转换为WebAssembly的唯一项目涉及使用浏览器内执行引擎： wasm_lua在浏览器中嵌入Lua运行时，而Luwa JIT将Lua编译为WebAssembly。
• Kotlin /本机 。 Kotlin语言的爱好者（一种Java衍生产品）一直在热切等待Kotlin / Native的完整发布，Kotlin / Native是Kotlin编译器的LLVM后端，可以生成独立的二进制文件。 Kotlin / Native 0.4引入了对WebAssembly的支持，将其作为编译目标，但仅作为概念证明。
• .NET 。 .Net语言尚不具备完整的WebAssembly支持，但是一些实验已经开始。 请参阅Blazor ，它可用于通过C＃和Microsoft的“ Razor”语法在.Net中构建单页Web应用程序。
• 尼姆 这种新兴的语言可以编译为C，因此理论上可以将生成的C编译为WebAssembly。 但是，正在开发Nim的实验后端，称为nwasm 。
• 其他LLVM支持的语言 。 从理论上讲，任何利用LLVM编译器框架的语言都可以编译为WebAssembly，因为LLVM支持WebAssembly作为许多目标之一。 但是，这并不一定意味着任何LLVM编译语言都可以在WebAssembly中按原样运行。 这仅意味着LLVM使定位WebAssembly更加容易。

以上所有项目都将原始程序或生成的字节码转换为WebAssembly。 但是对于诸如Ruby或Python这样的解释型语言，还有另一种方法：将应用程序的运行时间转换为WebAssembly，而不是转换应用程序本身。 然后，程序在转换后的运行时按原样运行。 由于许多语言运行时（包括Ruby和Python）都是用C / C ++编写的，因此转换过程从根本上讲与任何其他C / C ++应用程序相同。

当然，这意味着转换后的运行时必须先下载到浏览器，然后才能运行任何应用程序，这会减慢加载和解析时间。 应用程序的“纯” WebAssembly版本更加轻巧。 因此，在更多语言支持WebAssembly作为导出或编译目标之前，运行时转换充其量只能是权宜之计。

下一步是以您选择的语言编写代码，并注意该代码如何与WebAssembly环境交互，然后将其编译为WebAssembly模块（WASM二进制文件），最后将该模块与现有的模块集成。 JavaScript应用程序。

根据工具链的不同，如何将代码导出到WebAssembly的确切步骤将大不相同。 它们还将与为该语言构建常规本机二进制文件的方式有所不同。 例如，在Rust中，您需要执行几个步骤：

1. 使用wasm32-unknown-unknown工具链为Rust进行nightly构建。
2. 使用声明为#[no-mangle]外部函数编写Rust代码。
3. 使用上面的工具链构建代码。

（有关上述步骤的详细说明，请参见GitHub上的The Rust and WebAssembly Book 。）

值得注意的是，无论您使用哪种语言，为了将代码与HTML前端集成在一起，您都需要至少具有最低JavaScript水平。 如果本示例中的Rust和WebAssembly Book中的页面内JavaScript片段对您来说似乎是希腊文，请预留一些时间来学习至少足够JavaScript以了解那里发生的事情。

WebAssembly和JavaScript的集成是通过在JavaScript中使用WebAssembly对象创建到WebAssembly代码的桥梁来完成的。 Mozilla提供了有关如何执行此操作的文档 。 这是Rust的一个单独的WebAssembly示例 ，这是Node.js的一个WebAssembly示例 。

目前，WebAssembly后端和JavaScript / HTML前端之间的集成仍然是整个过程中最繁琐且手动的部分。 例如，对于Rust， 仍然必须通过原始数据指针手动创建到JavaScript的桥。

但是，更多的工具链开始解决这个问题。 Cheerp框架允许C ++程序员通过专用命名空间与浏览器的API进行通信 。 Rust提供了wasm-bindgen ，它充当JavaScript和Rust之间以及JavaScript和WebAssembly之间的双向桥梁。

另外，正在考虑有关如何处理与主机的绑定的高层建议 。 一旦完成，它将为编译为WebAssembly的语言与主机交互提供一种标准方法。 该提议的长期策略还包括对不是浏览器的主机的绑定，但是浏览器绑定是短期的立即使用案例。

WebAssembly工具仍处于最早阶段的领域之一是对调试和性能分析的支持。

在JavaScript源映射出现之前，编译成JavaScript的语言通常很难调试，因为原始代码和编译后的代码无法轻松关联。 WebAssembly也有一些相同的问题：如果用C编写代码并将其编译为WASM，则很难在源代码和编译后的代码之间建立关联。

JavaScript源映射指示源代码中的哪些行对应于已编译代码的哪些区域。 一些WebAssembly工具，例如Emscripten，也可以发出已编译代码JavaScript源映射。 WebAssembly的一项长期计划是一个源地图系统，它不仅可以使用JavaScript中提供的功能，而且还仅处于建议阶段。

目前，在野外调试WASM代码的最直接方法是使用Web浏览器的调试控制台。 WebAssemblyCode上的本文展示了如何使用源映射生成WASM代码，如何将其提供给浏览器的调试工具以及逐步执行代码。 请注意，所描述的步骤取决于使用emcc工具发出WASM。 您可能需要修改步骤，具体取决于您的特定工具链。

From: https://www.infoworld.com/article/3258547/webassembly-tutorial-get-started-with-webassembly.html