emscripten 安装与使用, 让C语言出现在前端

简介: 会安装sdk-release-upstream, node.js, 等,因为是从https://storage.googleapis.com/ 上下载相应的软件包,如果您因网络原因不能直接访问这个域名,则可能需要设置代理下载。

下载安装


官方推荐方式,先下载 emsdk:

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
# 下载并安装最新的 SDK 工具.
./emsdk install latest
# 为当前用户激活最新的 SDK. (写入 .emscripten 配置文件)
./emsdk activate latest
# 激活当前 PATH 环境变量
source ./emsdk_env.sh
注意在Windows上运行 emsdk,而不是 ./emsdk和, emsdk_env.bat而不是。 source ./emsdk_env.sh


会安装sdk-release-upstream, node.js, 等,因为是从

https://storage.googleapis.com/ 上下载相应的软件包,如果您因网络原因不能直接访问这个域名,则可能需要设置代理下载。


安装验证

确保已下载并安装Emscripten(执行此操作的确切方法取决于您的操作系统:Linux,Windows或Mac)。

Emscripten使用Emscripten编译器前端(emcc)进行访问。该脚本调用了构建代码所需的所有其他工具,并且可以代替_gcc_或_clang_等标准编译器。在命令行上使用./emcc或调用它./em++

$ emcc --version
emcc (Emscripten gcc/clang-like replacement) 1.40.1 
...


编译

接下来就可以编译代码啦。

来个万年不变的Hello world试试:

#include<stdio.h>
void main(){
  printf("Hello world!");
}

可以比较分别以

第一种情况:

emcc hello.c

和,第二种情况:

emcc -O2 hello.c -o hello.wasm

进行编译,感受一下差异。


第一种情况下

编译默认会生成一个2500多行的JavaScript文件 a.out.js和一个可反编译成文本wat格式的近1万行代码的 a.out.wasm 文件. 是太了点,不过不用怕,后面我们会告诉你如何让他们变小。

a.out.js是一坨胶水,用来在不同条件下为wasm搭建一个执行环境。先不管他究竟是啥,先试试运行看看:

node a.out.js

可惜,没有人跟你问世界好,相反,向你抛出一团警告:

stdio streams had content in them that was not flushed. you should set EXIT_RUNTIME to 1 (see the FAQ), or make sure to emit a newline when you printf etc.
(this may also be due to not including full filesystem support - try building with -s FORCE_FILESYSTEM=1)

这一坨英文的意思是,编译出的wasm默认情况下不会退出运行时,这是web情况下期待的方式,主程序main虽然运行结束了,但模块没有退出,静态变量可以保持在内存中,不释放。同时标准 I/O 缓冲区没有被flush,也就没有看到 Hello world!

听人劝, 加参数再编译:

emcc hello.c -s EXIT_RUNTIME=1

然后再用node.js运行:

node a.out.js
Hello world!

出现了期待的 Hello world! 不再出吓人警告了。

估计你会问,我编译的是hello.c,为啥出来的是 a.out.js?

这还真有点历史传统的味道,你可以把 a.out 理解成汇编输出(assembler output)。这种 *nix 操作系统下的可执行文件也称作 a.out 格式(试比较 ELF 格式)。

如果你看着不爽的话,可以指定自己名字,下面我们就看看如何指定自己的名字。


第二种情况

emcc有两个常用的编译参数,大小欧(O,o), 大欧 O 指定优化级别,小欧 o 指定输出文件和类型。


优化级别有 -O0, -O1, -O2, -O3 -Os这五种级别。不指定是为 -O0, 即没有优化,开发时一般指定为 -O0 或 -O1, 这样编译速度快,调试方便。 正式发布时可以是 -O2 或 -O3,这时代码会优化,执行更快。-Os 不光是执行快,同时优化大小,可生成更小的执行文件。


emcc 小欧 o 选项指定输出文件类型有: js,wasm 和 html。

让我们来试试生成html:

emcc -o hello.html hello.c

这回会生成三个文件: hello.html, hello.js, hello.wasm

在当前目录下执行 live-server

live-server

如果你机器上没有 live-server, 可以用 npm install live-server来安装。

live-server 会启动一个web服务器,默认监听本机的8080端口,并自动打开浏览器:

VK~ZN~X%57DZ9_W~SWEMG2H.png

点击hello.html:

Q[J8P@QB(F}5U0XBMI6DT4O.png

显示了两个黑窟窿页面,我的Hello world! 呢?

好吧,页面也有页面的怪癖,printf打印时,同样因为没有刷新缓冲区,没有看到我们的Hello world, 增加编译选项:

emcc hello.c -o hello.html -s EXIT_RUNTIME=1

CTRL+C 停掉 live-server, 重新编译,再启 live-server, 再刷页面:

QK(IW4G6YLZHHHIGEKU5U%G.png

好的,我们的 Hello world! 熠熠生辉,是那么的可爱!


我们经历了什么?


我们安装了 emscripten 编译工具链,把 C 语言写的代码分别移植到了 Node.js的命令行和 Web 页面各自己执行了一下。

谁说 C 语言不能做前端来着?

不过,眼下还看不出这么折腾有啥用,就让我带一起搞个能说明问题的用例吧?

相关文章
|
4月前
|
前端开发 关系型数据库 MySQL
【前端学java】MySQL数据库的本地安装
【8月更文挑战第12天】MySQL数据库的本地安装
49 3
|
2月前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
145 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
2月前
|
JavaScript 前端开发 Docker
前端的全栈之路Meteor篇(一):开发环境的搭建 -全局安装或使用容器镜像
本文介绍了如何搭建 Meteor 开发环境,包括全局安装 Meteor 工具和使用 Docker 镜像两种方法,以及创建和运行一个简单的 Meteor 项目的基本步骤。 Meteor 是一个全栈 JavaScript 框架,适用于构建实时 Web 应用程序。文章还提供了遇到问题时的解决建议和调试技巧。
|
2月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
730 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
2月前
|
缓存 JavaScript 前端开发
拿下奇怪的前端报错(三):npm install卡住了一个钟- 从原理搞定安装的全链路问题
本文详细分析了 `npm install` 过程中可能出现的卡顿问题及解决方法,包括网络问题、Node.js 版本不兼容、缓存问题、权限问题、包冲突、过时的 npm 版本、系统资源不足和脚本问题等,并提供了相应的解决策略。同时,还介绍了开启全部日志、使用替代工具和使用 Docker 提供 Node 环境等其他处理方法。
1174 0
|
2月前
|
前端开发 JavaScript 小程序
前端新人,入职新公司需要注意安装什么软件
前端新人,入职新公司需要注意安装什么软件
22 0
|
4月前
|
前端开发 Java Maven
【前端学java】全网最详细的maven安装与IDEA集成教程!
【8月更文挑战第12天】全网最详细的maven安装与IDEA集成教程!
113 2
【前端学java】全网最详细的maven安装与IDEA集成教程!
|
4月前
|
前端开发 Oracle Java
【前端学java】java开发的依赖安装与环境配置(1)
【8月更文挑战第8天】java开发的依赖安装与环境配置
58 1
【前端学java】java开发的依赖安装与环境配置(1)
|
4月前
|
前端开发 小程序 Unix
Centos安装前端开发常用软件
Centos安装前端开发常用软件
|
5月前
|
前端开发
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
51 1
下一篇
DataWorks