WebAssembly简单指导---译

开发者指导

本页面提供一步一步的操作将一个简单的程序编译成webassembly

前提要求

为了编译成webAssembly,需要提前安装一些工具:

  • Git。在Linux和OSX下已自带了Git,在Windows下需要安装 Git for Windows
  • CMake。在Linux和OSX下可以使用像apt-get 或 brew 这样的包管理工具来安装,在Windows下下载CMake installer;
  • 编译工具。 在linux下安装GCC,在OSX下安装Xcode。在Windows下安装 Visual Studio 2015 Community with Update 3 或更新的版本;
  • Python2.7.x。在Linux和OSX下大部分都内置了Python2.7版本,没有的需要安装,Windows下需要自动下载安装;

安装完后,确保git,cmake,python可访问(否则手动添加环境变量);从技术上讲,如果使用提前编译好的工具链,那么CMake和编译工具不是必须的,只是开发选项可能受到一点限制。

下载或编译工具链

在GitHub行容易获得一个提前编译好的工具链,用以将c/c++编译d为webAssembly

$ git clone https://github.com/juj/emsdk.git
$ cd emsdk
$ ./emsdk install latest
$ ./emsdk activate latest

如果你在Linux发布版本的操作系统里无法获得预编译的Emscripten 工具链,或者你想从源码构建所有工具链,Emscripten SDK 也能用来构建。它的操作步骤如下:

$ git clone https://github.com/juj/emsdk.git
$ cd emsdk
$ ./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
$ ./emsdk activate --build=Release sdk-incoming-64bit binaryen-master-64bit

经过h这些步骤后,安装已经完成了。在下载完预编译工具链或者你自己构建完成后,将Emscripten编译环境添加到当前shell环境中,输入:

$ source ./emsdk_env.sh --build=Release

此条命令添加相关的环境变量和目录到PATH中,使得当前终端很容易的找到编译工具。

在Windows下 把上面所有命令中的 ./emsdk替换为 emsdksource ./emsdk_env.sh替换为 emsdk_env

如果你是使用 Visual Studio 2017 ,在emsdk install命令后面添加一个参数 --vs2017

编译执行一个简单的程序

现在有一个完整的工具链来编译简单的程序为webAssembly。但是下面还有几个说明:

  • 需要使用emcc-s WASM=1选项。否则emcc默认编译为asm.js;
  • 如果要使Emscripten生成除了Wasm二进制文件和JavaScript包装文件外的可执行HTML文件,需要指定一个以 .html结尾的输出文件;
  • 最后,不能在浏览器里通过file://协议简单的打开HTML文件,因为在file协议里跨源请求时不被允许的,需要通过一个http服务来打开文件。

下面的命令创建和编译一个简单的“hello world”程序:

$ mkdir hello
$ cd hello
$ touch hello.c
$ echo '#include <stdio.h> int main(int argc, char ** argv) {  printf("Hello world!");}' > hello.c
$ emcc hello.c -s WASM=1 -o hello.html

可以g通过Emscript SDK的 emrun来提供一个http服务:

$ emrun --no_browser --port 8000 ./

当http服务运行起来,可以从浏览器打开,地址为: http://localhost:8000/hello.html,如果你在Emscripten 控制台看到“Hello world!”,那么恭喜你已经成功的编译webAssembly!

一点思考

对于办公来说,首选的时Windows或OSX,但OSX太贵了,所以Windows用的还是挺多的,我遇到好多的工具在Windows下的使用都依赖Visual Studio,但是Visual Studio实在是太笨重了,我特别厌恶,之后遇到了WSL 即Windows子系统,在里面可以安装好几种Linux系统,用起来特别流畅,比虚拟机好用多了,我觉得这个微软的这个功能特别赞。

WebAssembly文件加载常会碰都WebAssembly因为MIME 不是 wasm类型而无法编译问题,可以查看自己的服务器软件里有么有 Application/wasm类型。

nginx配置 MIME类型

找到nginx的配置文件所在目录,我的在/etc/nginx/下,里面有个mime.types文件,为了不弄乱排序结构,找到 application/v**** 和 application/x****的配置项中间加一行 application/wasm wasm;,保存后重启nginx systemctl restart nginx

// 配置后的一部分内容
..................
application/vnd.google-earth.kmz   kmz;
application/wasm                   wasm;
application/x-7z-compressed        7z;
....................

使用 curl -I url查看服务器响应的头部信息。

原文地址:https://www.cnblogs.com/scarecrowlxb/p/9045294.html

时间: 2024-08-02 01:53:52

WebAssembly简单指导---译的相关文章

H3C无线开局简单指导

一.设备简介: 本案例结合H3C WX3024E以及WA2620i-AGN.WA2610H-GN.WA2610X等设备为基础. 1.H3C 无线控制器WX3024E: H3C WX3024E无线控制器默认提供24个10/100/1000M电口,4个千兆SFP Combo口,可选配2个10GE XFP光口,支持PoE+供电. H3C WX3024E无线控制器默认可管理24个Fit AP,最大可管理Fit AP数量为96个,License步长为12个. 默认情况下,H3C WX3024E PoE供电

Android开发中的MVP架构(转)

写在前面,本博客来源于公众号文章:http://mp.weixin.qq.com/s?__biz=MzA3MDMyMjkzNg==&mid=402435540&idx=1&sn=1cd10bd9efaac7083575367a8b4af52f&scene=1&srcid=0910ARzPpBvVYPI1NDBZnixa#wechat_redirect 最近越来越多的人开始谈论架构.我周围的同事和工程师也是如此.尽管我还不是特别深入理解MVP和DDD,但是我们的新项目

iOS开发如何提高

阅读博客 在现在这个碎片化阅读流行的年代,博客的风头早已被微博盖过.而我却坚持写作博客,并且大量地阅读同行的iOS开发博客.博客的文章长度通常在 3000字左右,许多iOS开发知识都至少需要这样的篇幅才能完整地讲解清楚.并且博客相对于书籍来说,并没有较长的出版发行时间,所以阅读博客对于获取 最新的iOS开发知识有着非常良好的效果. 我自己精心整理了国内40多位iOS开发博主的博客地址列表:https://github.com/tangqiaoboy/iOSBlogCN,希望大家都能培养起阅读博客

Unity3D - 图形性能优化

Unity官方文档中有一篇是讲图形性能优化的,这篇文章无疑是指导Unity开发优化的最佳文章.Unity圣典曾翻译过旧的版本,但是太老旧了,跟最新的文档差别很大.我试着翻译一下最新的文档,点击查看原文链接. Optimizing Graphics Performance  图形性能优化 Good performance is critical to the success of many games. Below are some simple guidelines for maximizing

拥抱高效、拥抱 Bugtags 之来自用户的声音 2

小编按:这是一篇 Bugtags 用户来稿,主要是介绍了使用 Bugtags 前后对测试及解决 Bug 所带来的变化,感谢单车娱乐 App 工程师 - 李斌同学对 Bugtags 的信赖和支持.小编在这里诚邀各位热心用户向我们投稿,说出你使用 Bugtags 的故事. 遇见 bugtags 之前那点事 那些年,我们单车娱乐 App,自研发到上线,苦逼的在友盟,bugly,bughd 等各种 bug 反馈的工具来来回回踩坑,然而让 QA 和 PM 以及最身同感受的我们这些一线开发工程师表示各种吐槽

(转)SDL1.2到2.0的迁移指南

里面有些单词不好翻译所以放在开头,以备查验. BLock Image Transfer, a computer graphics operation in which two bitmap patterns are combined In computing, the Blit was a programmable bitmap graphics terminal designed by Rob Pike and Bart Locanthi Jr. of Bell Labs in 1982. S

SDL1.2到2.0的迁移指南(转)

目录: 1.简介2.新特性总览 2.1.查看更多内容3.SDL从12迁移到20 3.1.一些基本的事实 3.2.视频部分 3.2.1.用新的视频应用程序接口创建一个游戏 3.2.2.其他渲染器API的注意事项 3.3.OpenGL 3.4.输入 3.5.事件 3.6.音频 3.7.摇杆 3.8.线程 3.9.CD 3.10.挂了的平台 3.11.移动平台 3.12.RWops 3.13.附加库 3.14.重命名和替换的总结 3.15.其他的东东 里面有些单词不好翻译所以放在开头,以备查验. BL

[转贴]有关Angular 2.0的一切

对Angular 2.0的策略有疑问吗?就在这里提吧.在接下来的这篇文章里,我会解释Angular 2.0的主要特性区域,以及每个变化背后的动机.每个部分之后,我将提供自己在设计过程中的意见和见解,包括我认为仍然需要改进设计的重要部分. 注意:本文所反映是2014年11月6日的状态记录.如果你在较长时间之后读到此文,请检查一下我设计上是否有所变更. AngularJS 1.3 在开始讨论Angular的未来之前,我们先花点时间看看当前的版本.AngularJS 1.3是迄今为止最优的Angula

c++11 : range-based for loop

0. 形式 for ( declaration : expression ) statement 0.1 根据标准将会扩展成这样的形式: 1   { 2     auto&& __range = expression; 3     for (auto __begin = begin-expression, 4               __end = end-expression; 5          __begin != __end; 6          ++__begin) 7