Environment:Ubuntu 16.06 + emscripten

URL: https://emscripten.org/docs/getting_started/downloads.html#linux

1. Installation emsdk

# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git # Enter that directory
cd emsdk # Fetch the latest version of the emsdk (not needed the first time you clone)
git pull # Download and install the latest SDK tools.
./emsdk install latest # Make the "latest" SDK "active" for the current user. (writes .emscripten file)
./emsdk activate latest # Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh

2.  Emsdk install targets

./emsdk install 1.38.45

3. Updating the SDK

# Fetch the latest registry of available tools.
./emsdk update # Download and install the latest SDK tools.
./emsdk install latest # Set up the compiler configuration to point to the "latest" SDK.
./emsdk activate latest # Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh

4. windows /cenos 7部署流程:

下载代码

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

安装依赖,添加环境变量

# 安装依赖项,这个过程比较长,会下载并自动安装node、Java、python等环境包,耐心等待
emsdk install latest //centos 环境: ./emsdk install latest
# 激活上一步下载的环境变量临时,一旦关闭cmd窗口,环境变量就失效了。
emsdk activate latest //centos 环境: ./emsdk activate latest # 把emsdk加到环境变量中,方便后续执行命令
emsdk_env.bat //centos 环境: source ./emsdk_env.sh

编译代码

#include <stdio.h>

int main() {
printf("hello world.");
return 0;
}

编译为js

emcc test.c

执行后,会在当前cmd所在目录下生成a.out.js 和 a.out.wasm

编译为html格式的demo文件

emcc test.c -s WASM=1 -o test.html

编译后产生如下文件:

将html文件发布到web容器中,或者使用下面命令发布(本文使用httpd)

python -m http.server
# 也可以使用下面的命令,直接打开默认浏览器运行
emrun test.html

本地浏览器访问http://192.168.1.126/test.html 显示如下:

WebAssembly环境搭建的更多相关文章

  1. qt for webassembly环境搭建图文教程

    一.前言 从Qt5.14开始,官方的在线安装提供了qt for webassembly构建套件,这对很多小白来说绝对是个好消息,也绝对是个好东西,好消息是不用再去交叉编译自己生成qt for weba ...

  2. .NET Core系列 : 1、.NET Core 环境搭建和命令行CLI入门

    2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高, ...

  3. Azure Service Fabric 开发环境搭建

    微服务体系结构是一种将服务器应用程序构建为一组小型服务的方法,每个服务都按自己的进程运行,并通过 HTTP 和 WebSocket 等协议相互通信.每个微服务都在特定的界定上下文(每服务)中实现特定的 ...

  4. rnandroid环境搭建

    react-native 环境搭建具体步骤这个大家已经玩烂了,这个主要是记录下来自己做win7系统遇到的坑 1.com.android.ddmlib.installexception 遇到这个问题,在 ...

  5. python开发环境搭建

    虽然网上有很多python开发环境搭建的文章,不过重复造轮子还是要的,记录一下过程,方便自己以后配置,也方便正在学习中的同事配置他们的环境. 1.准备好安装包 1)上python官网下载python运 ...

  6. springMVC初探--环境搭建和第一个HelloWorld简单项目

    注:此篇为学习springMVC时,做的笔记整理. MVC框架要做哪些事情? a,将url映射到java类,或者java类的方法上 b,封装用户提交的数据 c,处理请求->调用相关的业务处理—& ...

  7. 【定有惊喜】android程序员如何做自己的API接口?php与android的良好交互(附环境搭建),让前端数据动起来~

    一.写在前面 web开发有前端和后端之分,其实android还是有前端和后端之分.android开发就相当于手机app的前端,一般都是php+android或者jsp+android开发.androi ...

  8. Nexus(一)环境搭建

    昨天,成功搭建了自己的 Maven 环境(详见:Maven(一)环境搭建),今天就来研究和探讨下 Nexus 的搭建! 使用背景: 安装环境:Windows 10 -64位 JDK版本:1.7 Mav ...

  9. 「译」JUnit 5 系列:环境搭建

    原文地址:http://blog.codefx.org/libraries/junit-5-setup/ 原文日期:15, Feb, 2016 译文首发:Linesh 的博客:环境搭建 我的 Gith ...

随机推荐

  1. C++ 虚函数和友元

    虚函数具有动态联编性,在类族中有强大功能:友元函数具有跨类访问的功能,本质却是一种对封装的破坏. 先看这样一个例子: #include<iostream> using namespace ...

  2. Eclipse中英文对照表(整理笔记)

    Eclipse百度界面中英文对照 目录 Eclipse百度界面中英文对照 0.菜单栏 1.File 文件菜单 2.Edit 编辑菜单 3.Source 源代码 4.Refactor 重构 5.Navi ...

  3. Java基础周测题,输入一个整数,输出所有能整除该整数的结果:

    需求说明: 输入一个整数,输出所有能整除该整数的结果: 实现代码: package demo; import java.util.Scanner; public class test1 { publi ...

  4. Android开发布局 案例一

    权重:就是在布局界面中所占的比例 实践案例: <?xml version="1.0" encoding="utf-8"?> <LinearLa ...

  5. 造轮子-strace(二)实现

    这一篇文章会介绍strace如何工作,再稍微深入介绍一下什么是system call.再介绍一下ptrace.wait(strace依赖的system call).最后再一起来造个轮子,动手用代码实现 ...

  6. [Atcoder Regular Contest 071 F & JZOJ5450]Neutral

    题目大意 一个无限长的序列\(a\), 需要满足 1.数列中的每一个数在\(1\)到\(n\)之间. 2.对于\(i>=n, j>=n\), \(a_i=a_j\). 3.对于\(i< ...

  7. CSS基础 装饰 元素本身隐藏和显示效果及案例

    1.visibility:hidden; 2.display: none: 区别: 1.visibility:hidden 隐藏元素本身,且在网页中 占位置 2.display:none; 隐藏元素本 ...

  8. org.reflections 接口通过反射获取实现类源码研究

    org.reflections 接口通过反射获取实现类源码研究 版本 org.reflections reflections 0.9.12 Reflections通过扫描classpath,索引元数据 ...

  9. Selenium_获取元素文本、属性值、尺寸(8)

    from selenium import webdriver driver = webdriver.Chrome() driver.maximize_window() driver.get(" ...

  10. antd递归渲染左侧菜单