文章目录
搭建 Emscripten 开发环境
Emscipten 官网的配置文档较为陈旧且存在缺失，网上可找到的也较为陈旧。本文记载笔者安装设置 emscripten 以及为其配置 cmake、clion、vscode 开发环境的过程。
1. 安装
特殊网络环境请使用 http_proxy, https_proxy 环境变量来开启代理。
1.1 下载、更新：
|
1 2 3 4 |
git clone https://github.com/emscripten-core/emsdk.git cd emsdk git pull |
1.2 安装、激活：
安装、激活环境，以下将列出 bash/zsh/fish/powershell/cmd 等环境的使用方法，但仅在此处列出，后续将仅列出 bash 的使用情况，如有需要可自行调整。
对于 bash/zsh/fish：
|
1 2 3 4 5 6 7 |
./emsdk install latest ./emsdk activate latest # for bash/zsh source emsdk_env.sh # for fish source emsdk_env.fish |
对于 cmd：
|
1 2 3 4 |
./emsdk.bat install latest ./emsdk.bat activate latest ./emsdk_env.bat |
对于 powershell：
|
1 2 3 4 |
./emsdk.ps1 install latest ./emsdk.ps1 activate latest ./emsdk_env.ps1 |
安装、激活可选组件，以 bash 为例，至少请安装、激活 node，emscripten，binaryen。
|
1 2 3 4 5 6 |
# 列出所有可选组件 ./emsdk list ./emsdk install binaryen-tag-1.38.31-64bit ./emsdk activate binaryen-tag-1.38.31-64bit source ./emsdk_env.sh |
2. 配置
2.1 ~/.emscripten 配置
需要视情况修改 ~/.emscripten 中的 python2，llvm，clang 路径，编辑 ~/.emscripten 如下所述。
Win，假设 emsdk 安装在 D:/code/emsdk：
|
1 2 3 4 5 6 7 8 9 10 |
NODE_JS = 'D:/code/emsdk/node/12.9.1_64bit/bin/node.exe' PYTHON = 'D:/code/emsdk/python/2.7.13.1_64bit/python-2.7.13.amd64/python.exe' JAVA = 'D:/code/emsdk/java/8.152_64bit/bin/java.exe' LLVM_ROOT = 'D:/code/emsdk/upstream/bin' BINARYEN_ROOT = 'D:/code/emsdk/upstream' EMSCRIPTEN_ROOT = 'D:/code/emsdk/upstream/emscripten' TEMP_DIR = 'C:/Users/<用户名>/AppData/Local/Temp' COMPILER_ENGINE = NODE_JS JS_ENGINES = [NODE_JS] |
Linux，假设 emsdk 安装在 /code/emsdk：
|
1 2 3 4 5 6 7 8 9 10 |
EMSCRIPTEN_ROOT = 'https://blogcdn.evernightfireworks.com/code/emsdk/emscripten/1.38.31' BINARYEN_ROOT = '/code/emsdk/binaryen/tag-1.38.31_64bit_binaryen' NODE_JS = '/code/emsdk/node/12.9.1_64bit/bin/node' TEMP_DIR = '/tmp' COMPILER_ENGINE = NODE_JS JS_ENGINES = [NODE_JS] LLVM_ROOT = '/usr/bin' JAVA='/usr/bin/java' PYTHON='/usr/bin/python2' |
2.2 环境变量配置
对于 Linux，编辑 ~/.pam_environment 以同时修改 login 和 no-login 终端的环境变量，同样以假设安装位置为 /code/emsdk：
|
1 2 3 4 5 6 7 |
EMSDK = /code/emsdk EM_CONFIG = @{HOME}/.emscripten EMSDK_NODE = /code/emsdk/node/12.9.1_64bit/bin/node EMSCRIPTEN = /code/emsdk/emscripten/1.38.31 JAVA_HOME = /code/java/8.152_64bit BINARYEN_ROOT = /code/emsdk/binaryen/tag-1.38.31_64bit_binaryen |
添加以下值到 PATH：
|
1 2 |
/code/emsdk:/code/emsdk/binaryen/tag-1.38.31_64bit_binaryen:/code/emsdk/emscripten/1.38.31 |
对于 Win，添加以下值到环境变量，假设安装位置为 D:\code\emsdk：
|
1 2 3 4 5 6 7 |
EMSDK = D:\code\emsdk EM_CONFIG = C:\Users\<用户名>\.emscripten EMSDK_NODE = D:\code\emsdk\node\12.9.1_64bit\bin\node.exe EMSDK_PYTHON = D:\code\emsdk\python\2.7.13.1_64bit\python-2.7.13.amd64\python.exe JAVA_HOME = D:\code\emsdk\java\8.152_64bit BINARYEN_ROOT = D:\code\emsdk\binaryen\tag-1.38.31_64bit_binaryen |
添加以下值到 PATH：
|
1 2 |
D:\code\emsdk;D:\code\emsdk\upstream\emscripten;D:\code\emsdk\node\12.9.1_64bit\bin;D:\code\emsdk\python\2.7.13.1_64bit\python-2.7.13.amd64;D:\code\emsdk\java\8.152_64bit\bin |
2.3 CMakeLists.txt 样例
输出文件可选择 html、js 等：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
cmake_minimum_required(VERSION 3.10) # toolchain settings set(CMAKE_TOOLCHAIN_FILE $ENV{EMSDK}/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake) set(CMAKE_CXX_STANDARD 14) set(CMAKE_CXX_STANDARD_REQUIRED ON) set(CMAKE_CXX_EXTENSIONS OFF) set(CMAKE_CXX_COMPILER "em++") set(CMAKE_C_COMPILER "emcc") project(cmake-emscripten-explore) file(GLOB_RECURSE WASM_SOURCES src/*.cpp) add_executable(${PROJECT_NAME} ${WASM_SOURCES}) target_include_directories(${PROJECT_NAME} PRIVATE src) set_target_properties(${PROJECT_NAME} PROPERTIES PREFIX "" SUFFIX ".html") set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -s WASM=1") |
可使用以下语句对 CMakeLists.txt 中调用的 emcc 等程序进行 Debug：
|
1 2 3 |
execute_process(COMMAND emcc "-v" OUTPUT_VARIABLE OUTING) message(STATUS "--OUTING--") |
2.4 Clion 配置
建议对于 Clion 使用 linux 环境，为 cmake 添加以下选项，使用 windows 请自行调整：
|
1 2 |
-DCMAKE_TOOLCHAIN_FILE='https://blogcdn.evernightfireworks.com/code/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake' |
Clion CMake 环境变量为：
|
1 2 3 4 5 6 7 |
EMSDK = /code/emsdk EM_CONFIG = ~/.emscripten EMSDK_NODE = /code/emsdk/node/12.9.1_64bit/bin/node EMSCRIPTEN = /code/emsdk/emscripten/1.38.31 BINARYEN_ROOT = /code/emsdk/binaryen/tag-1.38.31_64bit_binaryen PATH=/code/anaconda3/envs/py2/bin:/usr/bin:/code/emsdk:/code/emsdk/binaryen/tag-1.38.31_64bit_binaryen:/code/emsdk/emscripten/1.38.31:/code/emsdk/node/12.9.1_64bit/bin |
c编译器 /code/emsdk/emscripten/emcc，c++ 编译器 /code/emsdk/emscripten/em++，make 工具 /usr/bin/make
2.5 VSCode 配置
建议对于 VSCode 使用 linux 环境，为 cmake 插件添加以下配置，使用 windows 请自行调整：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "cmake.configureEnvironment": { "EMSDK":"/code/emsdk", "EM_CONFIG":"~/.emscripten", "EMSDK_NODE":"/code/emsdk/node/12.9.1_64bit/bin/node", "EMSCRIPTEN":"https://blogcdn.evernightfireworks.com/code/emsdk/emscripten/1.38.31", "BINARYEN_ROOT":"/code/emsdk/binaryen/tag-1.38.31_64bit_binaryen", "PATH":"/code/anaconda3/envs/py2/bin:/usr/bin:/code/emsdk:/code/emsdk/binaryen/tag-1.38.31_64bit_binaryen:/code/emsdk/emscripten/1.38.31:/code/emsdk/node/12.9.1_64bit/bin" }, "cmake.buildEnvironment": { "EMSDK":"/code/emsdk", "EM_CONFIG":"~/.emscripten", "EMSDK_NODE":"/code/emsdk/node/12.9.1_64bit/bin/node", "EMSCRIPTEN":"https://blogcdn.evernightfireworks.com/code/emsdk/emscripten/1.38.31", "BINARYEN_ROOT":"/code/emsdk/binaryen/tag-1.38.31_64bit_binaryen", "PATH":"/code/anaconda3/envs/py2/bin:/usr/bin:/code/emsdk:/code/emsdk/binaryen/tag-1.38.31_64bit_binaryen:/code/emsdk/emscripten/1.38.31:/code/emsdk/node/12.9.1_64bit/bin" } } |