我们相信:世界是美好的,你是我也是。 来玩一下解压小游戏吧!

最近苏南大叔在研究webassembly(wasm)的相关代码,因为可以生成wasm的高级编程语言众多,目前是处于一个选型的阶段。本文中将调研一下使用c/cpp编写wasm的可能性。这个时候,需要用到一个名为Emscripten的工具链。那么,Emscripten到底能做什么呢?怎么下载安装呢?

苏南大叔:cpp编译成wasm工具链Emscripten,如何下载安装? - emscripten
cpp编译成wasm工具链Emscripten,如何下载安装?(图7-1)

苏南大叔的“程序如此灵动”博客,记录苏南大叔的代码编程经验总结。测试环境:win10git@2.35.1.windows.2python@3.13.2Emscripten@4.0.4。先说一下苏南大叔的使用感受:这是一款非常奇葩的软件,实现的功能也挺奇葩的。完整完毕,占地面积1.5G。安装前提是python的情况下,还下载一个独用的python

什么是Emscripten?

Emscripten是一个开源的编译器工具链,它可以将CC++代码编译成WebAssembly(Wasm)JavaScript。编译之后,就可以在浏览器中运行相关代码了,而不需要依赖于特定的操作系统或硬件。对于那些希望将现有的C/C++项目移植到Web平台的开发者来说,Emscripten是一个非常强大的工具。

官方网站:

苏南大叔:cpp编译成wasm工具链Emscripten,如何下载安装? - emscripten-site
cpp编译成wasm工具链Emscripten,如何下载安装?(图7-2)

‌Emscripten‌这个单词可以分解为以下几个部分:
em‌:前缀,表示“嵌入”或“嵌入式的”。
‌script‌:词根,表示“脚本”。
en‌:后缀,表示使动词成为名词,常用于构成动词或名词。
因此,‌Emscripten‌可以理解为“嵌入式脚本语言编译器”。

Emscripten能做什么?

Emscripten能做什么?GPT-4o是这么说的:

  1. 将C/C++代码编译成WebAssembly:这使得可以在浏览器中运行高性能的C/C++代码。
  2. 与JavaScript交互Emscripten生成的代码可以与JavaScript代码进行互操作,允许在Web应用中调用C/C++函数,或者从C/C++代码中调用JavaScript函数。
  3. 文件系统支持Emscripten提供了一个虚拟文件系统,可以在浏览器中读写文件。
  4. 多线程支持Emscripten支持WebAssembly的多线程特性,可以在浏览器中实现多线程编程。

安装Emscripten

苏南大叔的测试环境是win10,所以在本文中的安装方式,在其它操作系统下需要稍稍做些修改。

准备工作

这里需要安装gitpython,这些都是程序员的基本功,不做过多介绍。参考文章:

下载并安装Emscripten SDK

注意,下面的代码在哪里执行,非常重要!!它执行的地方就决定了最终的可执行文件在哪里!而且环境变量也会指向这个位置!所以,请三思之后再执行!不要随便找个文件夹就执行了!

苏南大叔:cpp编译成wasm工具链Emscripten,如何下载安装? - git clone
cpp编译成wasm工具链Emscripten,如何下载安装?(图7-3)

执行命令:

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
emsdk install latest
emsdk activate latest --permanent
emsdk_env.bat

如果网络不通畅,github地址恰好无法访问的话。可以考虑:

苏南大叔:cpp编译成wasm工具链Emscripten,如何下载安装? - install-python-node
cpp编译成wasm工具链Emscripten,如何下载安装?(图7-4)

查看版本号

运行以下命令来验证Emscripten是否安装成功:

emcc -v

记得不但要在当前命令行里面验证,新开一个命令行也试试,这款软件可能有惊喜。

可能存在的问题

如果另开命令行界面后,可能会提示无法找到emcc

苏南大叔:cpp编译成wasm工具链Emscripten,如何下载安装? - 找不到emcc命令
cpp编译成wasm工具链Emscripten,如何下载安装?(图7-5)

active命令参数区别

active命令有三个变种。emsdk activate latestemsdk activate latest --permanentemsdk activate latest --system 的区别在于环境变量的设置范围和持久性:

  1. emsdk activate latest(临时变量):

    • 该命令会激活最新版本的 Emscripten SDK,但只在当前的终端会话中有效。
    • 关闭终端或打开一个新的终端时,需要重新运行该命令来激活环境。
  2. emsdk activate latest --permanent(用户系统path变量):

    • 该命令会永久激活最新版本的 Emscripten SDK。
    • 它会将环境变量写入到用户的配置文件中(例如 .bashrc.bash_profile),使得每次打开新的终端时,环境变量都会自动设置,无需手动激活。
  3. emsdk activate latest --system(系统path变量):

    • 该命令会在系统范围内激活最新版本的 Emscripten SDK。
    • 它会将环境变量写入到系统的环境变量配置中,使得所有用户和所有终端会话都能自动使用该版本的 Emscripten SDK。

总结来说:

  • emsdk activate latest 只在当前终端会话中有效。
  • emsdk activate latest --permanent 会在用户的所有终端会话中永久有效。
  • emsdk activate latest --system 会在系统范围内对所有用户和终端会话永久有效。

手工设置path

最后两条命令的目的就是:设置path。所以,可以去系统变量里面查证一下。如下图所示,如果确认存在相关设置,但是就是不生效。那就重新手工设置一下,立刻就生效了,不会找不到emcc命令了。

苏南大叔:cpp编译成wasm工具链Emscripten,如何下载安装? - 环境变量设置
cpp编译成wasm工具链Emscripten,如何下载安装?(图7-6)

参考文章

题外话:奇葩的软件

Emscripten的安装执行,需要python@3的支持,它的目标功能是把c/c++编译成wasmjs。它的安装包下面,有着一个看似完整的python,和一个看似完整的node。而且它们的目标编译来源是ccpp。所以,苏南大叔已经开始困惑了,这些编程语言是相互刷存在感啊...

苏南大叔:cpp编译成wasm工具链Emscripten,如何下载安装? - active
cpp编译成wasm工具链Emscripten,如何下载安装?(图7-7)

忽然想起来,php的源码编译过程中,使用到了php.exe... 更是一个奇葩的故事。

这两条命令还可能会强制把它安装目录下的node也加到path里面去。(并没有强制把它安装目录下的python加进去)。那么,对于原本就是玩大前端node的程序员,可能会在不知不觉中掉到坑里面。自己平时每天都在用的node命令,被人悄悄的替换了,都不知道。所以,再一次去确认一下path变量吧。

总结

Emscripten是一个非常强大的工具链,可以帮助苏南大叔将C/C++代码编译成WebAssembly,从而在浏览器中运行这些代码。本文只是以建立Emscripten的初步印象为目的,后续文章里面,将会继续探讨如何使用Emscripten进行实际开发。

本文的最终目的,就是在命令行里面找到emcc命令,为后续文章做准备。

emsdk使用起来和rustup的感觉差不多。

更多苏南大叔的wasm相关经验文章,请点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   wasm