我们之前说过,对于javascript来言,前端的世界千变万化。前几篇文章给大家说过用emscripten来编译c语言然后用到asm.js和webassembly,这种方法是可以始前端代码的执行速度提升很大,但是由于在实际的项目里c语言缺乏很多高级特性,很多功能没法实现,不利于开发大型的项目,而c++又太过于复杂,所以最终我选择了用rust。
一开始也纠结过要用Go还是Rust或者Swift的,后来发现Go目前还不支持编译到WebAssembly,Swift按理说应该可以支持的,因为都是用LLVM做的编译器,不过没有找到好的资料,好像说要自己编译LLVM去支持https://stackoverflow.com/questions/46572144/compile-swift-to-webassembly 。另外对Rust的一些特性很是喜欢,听说Rust很复杂,比较像Scala和Haskell,而偏偏我对Scala还算熟悉,也学过一下Haskell,所以决定尝试一下Rust。
https://github.com/ChristianMurphy/compile-to-web 这里可以查看目前能编译到WebAssembly的语言。
PS, 话说asm.js和Rust都是Mozilla搞的呢。
安装Rust的管理工具rustup
rustup用于安装管理Rust的相关工具,包括编译器rustc、包管理工具cargo等,支持安装不同版本比如stable, beta, nightly等以及在不同版本之间切换,类似于nvm。
curl https://sh.rustup.rs -sSf | sh
安装Emscripten Rust编译器
用rustup安装最新体验版(Nightly Version):
rustup toolchain add nightly rustup target add wasm32-unknown-emscripten --toolchain nightly
安装cmake
根据平台自行选择:
brew install cmake # MacOS, brew sudo port install cmake # MacOS, MacPorts sudo apt-get install cmake # Debian Linux
安装 Emscripten
参考前一篇,或者直接执行下面命令:
wget https://s3.amazonaws.com/mozilla-games/emscripten/releases/emsdk-portable.tar.gz tar -xvf emsdk-portable.tar.gz cd emsdk-portable ./emsdk update ./emsdk install sdk-incoming-64bit
这一步花的时间比较久,据说要2个多小时,我是执行完命令就出去跟朋友吃饭了,所以具体时间不知道。
添加下列路径到PATH中:
~/emsdk-portable ~/emsdk-portable/clang/fastcomp/build_incoming_64/bin ~/emsdk-portable/emscripten/incoming
终端执行emcc -v检查是否安装成功。
用Webpack运行Rust
新建一个Rust/Javascript混合项目:
cargo new webasm --bin --vcs none cd webasm npm init rustup override set nightly
安装Webpack, webpack-dev-server, rust-wasm-loader,
npm i -D webpack webpack-dev-server rust-wasm-loader
增加package.json脚本:
{
"name": "webasm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile": "webpack --progress",
"serve": "http-server",
"start": "webpack-dev-server --content-base ./build"
},
"author": "magicly",
"license": "ISC",
"devDependencies": {
"http-server": "^0.10.0",
"rust-wasm-loader": "^0.1.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.8.2"
}
}在build目录下新建文件index.html:
Hello WebAssembly < div id="container">











