hanxi / blog

涵曦的博客
https://blog.hanxi.cc
56 stars 5 forks source link

使用 Emscripten 编译 C 函数为 JS 函数 #18

Open hanxi opened 6 years ago

hanxi commented 6 years ago

1. 安装 Emscripten 环境

参考官方文档: http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html

系统环境建议使用 Ubuntu18.04,我在 CentOS7 上因 glibcxx 的版本过低的问题搞不定 clang 报错的问题。

Enter that directory

cd emsdk


- 下载依赖环境:
```sh
# 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

执行这行命令 ./emsdk install latest 时有概率会失败,建议使用代理。

最后一行设置环境变量的命令 source ./emsdk_env.sh 每次重新开机需要重新执行。

2. 写个 Demo

参考了 http://www.ruanyifeng.com/blog/2017/09/asmjs_emscripten.html

但是版本可能有点旧了,谷歌搜下报错也都能解决。

新建 t1.c 文件,内容为:

double SquareVal(double val) {
    return val * val;
}

然后新建文件 t1.html,内容为:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

<body>
    <h1>Test File</h1>
    <script type="text/javascript" src="t1.js"></script>

    <script>
        Module['onRuntimeInitialized'] = onRuntimeInitialized;
        const SquareVal = Module.cwrap('SquareVal', 'number', ['number']);

        function onRuntimeInitialized() {
            document.write("result == " + SquareVal(10));
        }
    </script>

</body>

执行命令:

emcc -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]'  -s EXPORTED_FUNCTIONS="['_SquareVal']" t1.c -o t1.js
python -m SimpleHTTPServer 8080

然后在浏览器中打开 http://localhost:8080/t1.html