一、环境概况

二、环境准备

2.1 Git软件

2.1.1 Windows安装

2.2.2 linux安装

2.2 Python软件

2.2.1 Windows安装

2.2.2 linux安装

三、emsdk安装

3.1 Windows添加环境变量

3.2 Linux添加环境变量

四、简单测试

参考资料

由于项目需要，需要在浏览器(Firefox、chrome系列浏览器、Edge浏览器)中运行c/c++代码，查了相关的资料，有两种方式：1、使用浏览器扩展WebExtensions; 2、使用Emscripten中的wasm。

该系列文章主要记录Emscripten中的开发与测试过程中遇到的bug。

该篇文章主要记录Emscripten开发环境的搭建，包括windows、linux(ubuntu14)；一些关于WebAssembly的介绍，网上资料很多，以及官网上也有，这里就不需要多叙述了。

如果要把一个C/C++程序编译成一个.wasm文件，是需要编译工具来完成的。WebAssembly 社区推荐常用工具的工具为：

Emscripten：能把 C、C++代码转换成 wasm、asm.js；
Binaryen：提供更简洁的 IR，把 IR 转换成 wasm，并且提供 wasm 的编译时优化、wasm 虚拟机，wasm 压缩等功能。

一、环境概况

我目前windows的版本是Win10。如下图所示：

linux下的环境，目前使用的是虚拟机中安装ubuntu系统，我的VMWare的版本是：VMWare Workstation 16 pro。如下图所示:

我安装的虚拟机环境是：ubuntu 14-04 LTS版本。如下图所示：

二、环境准备

无论windows环境还是linux上都需要提前安装Git软件以及Python软件。建议配置一个VPN，连接外网进行对应的下载操作。

2.1 Git软件

Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。相关详细介绍请看参考资料。

2.1.1 Windows安装

首先进入git下载页面：Git - Downloading Package (git-scm.com)，进行下载，下载完成后，双击，进行下一步的操作即可。安装完成后，检查一下环境变量是否配置成功，即打开命令提示符，输入查看版本信息的命令，若能正常显示出版本信息则表示安装成功。若提示" 'git' 不是内部或外部命令，也不是可运行的程序或批处理文件。"的错误时，则去检查系统的环境变量是否设置成功。如下图所示：

2.2.2 linux安装

打开终端，输入以下命令进行Git软件包的安装,安装过程中一直按Enter键即可:

sudo apt-get install git

输入查看版本信息的命令，若能正常显示出版本信息则表示安装成功。如下图所示:

2.2 Python软件

Python 是一种解释型、面向对象、动态数据类型的高级程序设计语言。

2.2.1 Windows安装

首先进入Python下载页面：Git - Downloading Package (git-scm.com)Download Python | Python.orgGit - Downloading Package (git-scm.com)，选择最新的版本进行下载(建议下载64的安装程序)，下载完成后，双击，进行下一步的操作即可。安装完成后，检查一下环境变量是否配置成功，即打开命令提示符，输入查看版本信息的命令，若能正常显示出版本信息则表示安装成功。若提示" 'python 不是内部或外部命令，也不是可运行的程序或批处理文件。"的错误时，则去检查系统的环境变量是否设置成功。如下图所示：

2.2.2 linux安装

由于ubuntu系统自带的有python软件包，则直接输入查看版本信息的命令，若能正常显示出版本信息则表示安装成功。如果提示没有安装且为ubuntu 20的系统时，可以使用sudo apt-get install python3命令进行安装。ubuntu14下的截图如下图所示:

三、emsdk安装

首先打开终端或者命令提示符，通过git下载emsdk的驱动程序（是一个python脚本）。

# 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

git操作有可能会报下面的错误：

如果出现上述错误，建议使用VPN或者进入GitHub - emscripten-core/emsdk: Emscripten SDK 网页中，点击Code菜单下的Download ZIP按钮下载，将下载后的包解压到指定目录即可。

执行以下命令，进行源码安装以及SDK激活。这里需要注意的是：Windows平台下，要用emsdk代替./emsdk ，要用emsdk_env.bat代替source ./emsdk_env.sh：

# 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

还需要注意的是，执行完上面的代码后，只能激活当前命令提示符或者终端的环境变量，需要将下面的相关的环境变量添加到系统或者用户的环境变量中。

3.1 Windows添加环境变量

Windows中就直接打开系统环境框进行添加。Windows下需要添加的环境变量如下图：

# 单独设置的环境变量，我这里是windows环境
EMSDK=D:\workspace\emsdk\emsdk
EMSDK_NODE=%EMSDK%\node\14.15.5_64bit\bin\node.exe
EMSDK_PYTHON=%EMSDK%\python\3.9.2-1_64bit\python.exe# PATH中也要添加环境变量
%EMSDK%
%EMSDK%\upstream\emscripten
%EMSDK%\node\14.15.5_64bit\bin

添加后的截图如下：

双击系统变量中的PATH变量，结果如下图所示：

添加完成后，关闭所有的命令提示符，重新打开命令提示符，输入相应的命令（如图片所示），检查环境变量是否设置成功。

3.2 Linux添加环境变量

linux下，打开终端，将下面的变量值添加到最后即可。

export EMSDK="/home/luyp/emsdk/emsdk"
export EM_CONFIG="$EMSDK/.emscripten"
export EMSDK_NODE="$EMSDK/node/14.15.5_64bit/bin/node"
export PATH="$PATH:$EMSDK/upstream/bin/:$EMSDK/upstream/emscripten/:$EMSDK/node/14.15.5_64bit/bin/"

使用下面的命令后，环境变量添加成功。

# 使用VIM打开用户的环境变量文件
vim ~/.bashrc# 将环境变量添加完成后，保存并退出vim# 使用下面命令使环境变量生效
source ~/.bashrc

执行source命令完成后输入相应的命令（如图片所示），检查环境变量是否设置成功。如果提示下面的错误：

该错误的原因是ubuntu系统中自带的python版本太低(经过测试，ubuntu 14、ubuntu 16下系统自带的python版本太低)。则去官网下载最新的python3的源码，自己直接进行编译，然后查看了emcc的源码，则发现去读取了一个EMSDK_PYTHON的环境变量，则将编译的pyhon路径加入到环境变量即可。

ubuntu 14系统中执行下面的命令：

# 使用wget命令下载python3.6.14的版本
wget https://www.python.org/ftp/python/3.6.14/Python-3.6.14.tgz# 进行解压缩操作
tar xzf Python-3.6.14.tgz # 进入目录
cd ./Python-3.6.14# 进行配置，并通过--prefix指定install后的目录
./configure --prefix="$EMSDK/python3"# 进行编译
make# 进行安装
make install

将下面的环境变量值添加到.bashrc的最后即可。

export EMSDK_PYTHON="$EMSDK/python3/bin/python3.6"

执行source ~/.bashrc 命令完成后，环境变量设置成功。结果如下图所示：

四、简单测试

前面环境配置成功，使用官方自带的demo进行简单的测试。在指定的目录中，创建一个hello.c的文件，代码如下：

#include <stdio.h>int main() {printf("hello, world!\n");return 0;
}

打开命令提示符或者终端，进入hello.c所在目录，执行以下命令，来生成对应的文件。命令详解查看另外的博客：Emscripten 编译器(emcc) 命令总结_wngzhem的博客-CSDN博客。

emcc ./hello.c -s WASM=1 -o ./hello.html

执行后会产生三个新文件，如下图所示：

hello.wasm：二进制的wasm模块代码。
hello.js 一个包含了用来在原生C函数和JavaScript/wasm之间转换的JavaScript文件
hello.html 一个用来加载，编译，实例化的一个HTML文件

将该文件夹部署到自己搭建的web服务器中，通过浏览器来查看。我通过启动http服务命令( emrun --no_browser --port 8080 ./hello_world.html )，没有启动成功，没有去查询具体原因。结果如图所示：

可以查看到hello.c中本应该输入到终端中的hello world输入到了浏览器中。说明环境搭建成功。

下一篇文章来简单分析一下wasm与js中的内容，以及编译c/c++程序的多种方式。

参考资料

1、 Git 教程 | 菜鸟教程 (runoob.com)

2、Python 基础教程 | 菜鸟教程 (runoob.com)

3、Getting Started — Emscripten 3.0.1-git (dev) documentation

4、Download and install — Emscripten 3.0.1-git (dev) documentation

5、Emscripten Tutorial — Emscripten 3.0.1-git （dev） documentation

6、Emscripten 编译器(emcc) 命令总结_wngzhem的博客-CSDN博客

Emscripten的研究与学习 --- 初探Emscripten相关推荐

python开发需要掌握哪些知识-研究深度学习的开发者，需要对 Python 掌握哪些知识？...
原标题:研究深度学习的开发者,需要对 Python 掌握哪些知识? 今天是918,一个对中国人来说非常特殊的日子.这一天,有些地方可能会拉响警笛,有的地方可能会有一些纪念活动. 但如论如何,今天都是一 ...
ASP.NET Core on K8S学习初探（1）
" [LOG] ASP.NET Core on K8S Starting..." 01 - 写在之前当近期的一个App上线后,发现目前的docker实例(应用服务BFF+中台服务 ...
go语言学习初探（二）基础语法
变量声明 var v1 int var v2 string var v3 [10]int var v4 []int var v5 struct {f int } var v6 *int var v7 ...
[转载]一篇经典的求职经历博客，值得深入研究和学习
一篇经典的求职经历博客,值得深入研究和学习,感谢原创作者分享! 工作刚刚落实,论文也刚完成,终于有时间对自己的求职历程及求职经验进行总结了.应同学要求,最近准备书写系列文章"我的求职历程及经 ...
算法研究和学习-果蝇算法FOA
算法研究和学习-果蝇算法FOA 前言 FOA算法为优化算法 ,求最优解的问题 ,最大值最小值问题 FOA - python代码 import numpy as np import matp ...
我在Salira的800天(2009.5.20~2011.7.29)-三．研究与学习篇
本博客(http://blog.csdn.net/livelylittlefish )贴出作者(阿波)相关研究.学习内容所做的笔记,欢迎广大朋友指正! Content 零．序一．感谢篇二．工作篇 ...
威联通(qnap)nas存储阵列失败，研究和学习
威联通(qnap)nas存储阵列失败,研究和学习经过找了很多资料去国外也看了一下,发现大量的威联通nas断电后导致superblock数据块失效的问题,所以我没有经验第一次碰到,我自己尝试了很多操作 ...
TP保护的研究和学习-用户态下调试附加篇（二）
TP保护的研究和学习-用户态下调试附加篇引言: 本篇系列旨在研究学习腾讯保护系统的保护方案实现,文中尽量以"发现问题然后尝试解决问题"的模式来处理遇到的问题,此前网上有太多相 ...
强化学习——初探强化学习
本文引自:< 动手学强化学习 > 第 1 章初探强化学习 1.1 简介亲爱的读者,欢迎来到强化学习的世界.初探强化学习,你是否充满了好奇和期待呢?我们想说,首先感谢你的选择,学习本书不 ...

Emscripten的研究与学习 --- 初探Emscripten

一、环境概况

二、环境准备

2.1 Git软件

2.1.1 Windows安装

2.2.2 linux安装

2.2 Python软件

2.2.1 Windows安装

2.2.2 linux安装

三、emsdk安装

3.1 Windows添加环境变量

3.2 Linux添加环境变量

四、简单测试

参考资料

Emscripten的研究与学习 --- 初探Emscripten相关推荐

最新文章

热门文章