WebAssembly入门介绍

WebAssembly介绍

 

WebAssembly?

1,WebAssembly是由 Google、Microsoft、Mozilla、Apple 等几家大公司合作发起的一个关于 面向Web的通用二进制和文本格式 的项目。WebAssembly 是除了 JavaScript 以外,另一种可以在网页中运行的编程语言。

2,WebAssembly(缩写WASM)是一种新的字节码格式。并且被设计为多种编程语言(如C、Rust)目标文件格式,以.wasm 为文件名后缀。WASM通过LLVM(Low Level Virtual Machine、底层虚拟机)工具链支持多种编程语言。

3,WebAssembly初期目标是浏览器内应用程序的高性能执行引擎,随着WASM 在开发者社区中越来越流行,WASM 也正在从客户端迁移到服务端,成为服务端技术的新锐。

 

WebAssembly 可以用 C 语言或者 Rust 开发,再编译成 .was文件(WebAssembly文件),还可以利用TypeScript开发,再编译成 .was文件。

简单地说,WebAssembly 是一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案。

 

WebAssembly(Wasm)官网

https://webassembly.org/

 

WebAssembly(Wasm)中文文档

https://www.wasm.com.cn/

 

 

Emscripten编译工具,可将其他的高级语言,编译成WebAssembly。只要高级语言能转换成 LLVM IR(LLVM Intermediate Representation:LLVM中间表示,LLVM——Low Level Virtual Machine——底层虚拟机),就能被编译成 WebAssembly 字节码。Emscripten官网:

https://emscripten.org/index.html

 

一般而言编译需要安装工具Emscripten,目前(2020年6月)Windows10中Emscripten 安装比较容易出错,网上文章大多语焉不详,我在试用时饱受挫折,多次实验,通过,特撰 “Windows10中Emscripten 安装详解”一文:

https://blog.csdn.net/cnds123/article/details/106742371

 

我们可以使用在线(“在线”意味不需要在本地安装)工具。

WebAssembly Studio

WebAssembly Studio 是WebAssembly 的在线 IDE 开发工具

https://webassembly.studio/

WebAssembly入门介绍

 

具体使用参见:

https://blog.csdn.net/m0_46439030/article/details/106365076

 

 

WasmFiddle

WasmFiddle界面简陋,但是它不仅能够查看编译结果,还能够加入js代码,查看运行结果。

https://wasdk.github.io/WasmFiddle/?j1noa

 

WasmFiddle界面介绍

WebAssembly入门介绍

 

AssemblyScript

AssemblyScript将TypeScript编译成WebAssembly。这对于很多前端同学来说,入门的门槛还是很低的。要将TypeScript 编译为WebAssembly,就要用到AssemblyScript编译器了。AssemblyScript官网

https://github.com/AssemblyScript

 

AssemblyScript实验环境搭建

AssemblyScript使用Binaryen(Emscripten的WebAssembly后端)将严格类型化的TypeScript(基本的带有类型的JavaScript)编译为WebAssembly,虽然它提供了几种新的特定于WebAssembly的类型和内置函数,但它本身并不是一种真正的语言,而是一种编译器变体。 它生成精简的WebAssembly模块,只需要一个npm安装。

前提,需要 Node.js 的最低版本为 8 才能得到 WebAssembly 的支持。

建立一个新的空目录,转到一个这个空目录,创建一个 package.json 文件,安装 AssemblyScript。

 

建立一个新的空目录:

mkdir assemblyscript-demo

转到一个这个空目录:

cd assemblyscript-demo

创建一个 package.json 文件:

npm init

安装 AssemblyScript

npm install --save-dev github:AssemblyScript/assemblyscript

 

 

AssemblyScript 入门指南

https://segmentfault.com/a/1190000021063091