开发者指导

本页面提供一步一步的操作将一个简单的程序编译成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查看服务器响应的头部信息。

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

  1. REST API设计指导——译自Microsoft REST API Guidelines(四)

    前言 前面我们说了,如果API的设计更规范更合理,在很大程度上能够提高联调的效率,降低沟通成本.那么什么是好的API设计?这里我们不得不提到REST API. 关于REST API的书籍很多,但是完整 ...

  2. REST API设计指导——译自Microsoft REST API Guidelines(二)

    由于文章内容较长,只能拆开发布.翻译的不对之处,请多多指教. 另外:最近团队在做一些技术何架构的研究,视频教程只能争取周末多录制一点,同时预计在下周我们会展开一次直播活动,内容围绕容器技术这块. 所有 ...

  3. 开发Angular库的简单指导(译)

    1. 最近工作上用到Angular,需要查阅一些英文资料,虽然英文非常烂,但是种种原因又不得不硬着头皮上,只是每次看英文都很费力,因此决定将一些比较重要的特别是需要反复阅读的资料翻译一下,以节约再次阅 ...

  4. REST API设计指导——译自Microsoft REST API Guidelines(一)

    前言 前面我们说了,有章可循,有据可依,有正确的产品流程和规范,我们的工作才不至于产生混乱,团队的工作才能更有成效.我们经常见到,程序开发可能只用了半个月,但是接口的联调却经常需要花费半个月甚至一个月 ...

  5. REST API设计指导——译自Microsoft REST API Guidelines(三)

    前面我们说了,如果API的设计更规范更合理,在很大程度上能够提高联调的效率,降低沟通成本.那么什么是好的API设计?这里我们不得不提到REST API. 关于REST API的书籍很多,但是完整完善实 ...

  6. 基于LoadRunner11,以wifi热点方式录制APP脚本简单指导

    本想详细写下操作过程,但并不觉着十分必要,通过baidu或我要自学网均能找到相关资料,所以详细操作过程不再赘述,只是把过程中遇到的问题说明下解释下,让大家“录制APP”的路更平坦! 1.如何使用Loa ...

  7. Moco使用简单指导

    下载地址 需要java运行环境支持.下载jar包:moco-runner-<version>-standalone.jar 配置文件 下面是参考: 配置 Moco的配置文件格式使用的是js ...

  8. Vim插件:Unite新手指导(译)

    Unite是什么? Unite可以在一个项目中快速浏览文件.但是它不仅限于文件,其他任何可以列出的东西都可以很好的被显示和搜索.这个开放式的特性很可能是人们找到它的原因(原文:This open-en ...

  9. .NET开发者如何愉快的进行微信公众号开发

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:这篇文章只是一个如何提高开发效率的简单指导和记录,不会涉及具体的微信公众号开发内容. ...

随机推荐

  1. sysbase 笔记

    Alter 在已有数据的表中新增一个字段: ALTER table ciecdb.ciec.eci_mansmfile ADD num int default 0;

  2. python-flask之request的属性

    flask的request模块的属性(参考) #代码示例,仅仅是为了测试request的属性值 @app.route('/login', methods = ['GET','POST']) def l ...

  3. 题解 P1614 【爱与愁的心痛】

    题目链接 前缀和. #重点在一个小小的常数优化 但是数据大了以后比楼下们跑的会快!!! 楼下用前缀和的题解都是跑了两遍循环. 而实际上一遍循环就可以呀. 就是加一段这个 if(i>=m) if( ...

  4. luoguP3648 [APIO2014]序列分割

    https://www.luogu.org/problemnew/show/P3648 同bzoj3675 这题斜率优化+滚动数组就可以了qwq 因为我是在飞机上瞎bb的式子,所以可能会和别的题解的式 ...

  5. 根据枚举获取枚举的Description特性值

    首先定义一个枚举:两个值:已确认.未确认. public enum ConfirmStatusEnum { [Description("未确认")] unconfirmed = , ...

  6. 公共子序列(luogu P1439)

    传送门 题目描述 给出1-n的两个排列P1和P2,求它们的最长公共子序列. 输入输出格式 输入格式: 第一行是一个数n, 接下来两行,每行为n个数,为自然数1-n的一个排列. 输出格式: 一个数,即最 ...

  7. springcloud微服务架构的思考

    在网上找到一张关于微服务体系架构的图 应用组件: 首先对于整个程序的入口应该是网关,zuul部分 这个组件在springcloud中的gateway服务之后,zuul可以进行网关分配,根据想应的路劲进 ...

  8. JavaWeb学习笔记(十二)—— JDBC的基本使用

    一.JDBC概述 1.1 数据库驱动 这里的驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后才能够使用声卡和网卡,同样道 ...

  9. python学习之路---day07

    一:先看什么事赋值? 以例子举例说明:. a=[1,2,3,[11,22,33]] b=a print(b) -->b=[1,2,3,[11,22,33]] 01):赋值 浅拷贝:我们创建a时, ...

  10. Carryon 数数字

    Carryon 数数字 描述 Carryon 最近迷上了数数字,然后 Starry 给了他一个区间[l,r] ,然后提了几个要求, 需要将 l 到 r 之间的数全部转化成 16 进制,然后连起来. 将 ...