awtk踩坑记录一:awtk-web build.py编译过程笔记

工作需求,接触了awtk, 要求把界面部署到web上,期间因为各种编译问题卡的半死,提了不少issue, 经过几天补课,把项目的编译结构给摸了一遍,做个记录,也希望能帮到有同样问题的朋友。

之前python只是略接触过,第一次见过正规项目用python编译,还尝试自己调试追踪过程,感觉也成长了不少。

测试方法:vscode下用python插件F5 debug, debug方式选择command line arguments

放编译build.py的方法以方便CV:

./emsdk_env
cd ../awtk-web
python build.py D:\AWStudioProjects\Workspace\AwtkApplication3\build.json all

build.py入口:

python 复制代码
def run(app_root, config, action):
    prepare_app_target_dir(config)
    prepare_export_funcs(app_root, config)

    if action == 'all':
        build_app_assets(app_root, config)
        build_awtk_js(app_root, config, ' -g4 -gsource-map ')
        build_awtk_web_js(config)
...

1.build_app_assets:生成webroot映像,加载项目资源

  • 从目标的build.json【本例目标名AwtkApplication3, python变量名config】中指定的路径copy资源到awtk-web的对应的design目录,project.json, data/app.html和data/index.html,。
  • 调用update_res.py更新资源res目录

build.json

json 复制代码
{
  "name": "AwtkApplication3",
  "version": "1.0",
  "assets": "res/assets",
  "author": "AWTK Develop Team",
  "copyright": "Guangzhou ZHIYUAN Electronics Co.,Ltd.",
  "themes":["default"],
  "web": {
    "app_type": "c",
    "assets": "design",
    "sources": [
      "src/*.c",
      "src/*/*.c"
    ],
    "config": {
      "fontScale": "0.8",
      "defaultFont": "sans"
    }
  }
}

build.py

python 复制代码
#src_app_root='D:\\AWStudioProjects\\Workspace\\AwtkApplication3'
#config是目标项目的build.json对象
def build_app_assets(src_app_root, config):
    #生成对应项目在awtk-web/webroot的对应映像,并复制项目design文件夹到映像目录下
    copy_assets(src_app_root, config)   
    #复制对应项目project.json到对应映像目录下
    copy_project_json(src_app_root, config) 
    #复制awtk-web的html模版app.html及index.html到对应映像
    copy_data_file(config, 'app.html')      
    copy_data_file(config, 'index.html')
    #更新对应映像的assets:为目标映像生成script文件夹和res文件夹以及assets_web.js
    update_assets(config)       
    #构建对应的romfs文件系统(如果有),一般不需要
    build_romfs(app_root, config);
c 复制代码
#src = 'scripts'
#dst = 'D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\scripts'
def prepare_update_res(config):
    src = 'scripts'
    dst = join_path(config_get_app_target_dir(config), 'scripts')

    copy_folder(src, dst)
 
#return: 'D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3'
def config_get_app_target_dir(config):
    return join_path(WEB_ROOT, config['name'])
        
def update_assets(config):
	#复制awtk-web的scripts文件夹到目标项目的webroot映像下
    prepare_update_res(config)
    #获取目标项目的webroot映像目录
    config_get_app_target_dir(config)
        
""" 
	运行update.res.py更新资源,相当于
    cd D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3
    本地系统python ./scripts/update_res.py res 
    本地系统python ./scripts/update_res.py json 
    本地系统python ./scripts/update_res.py web    
    cd D:\\Devtools\\awtk-web
"""
        
    cwd = os.getcwd()
    app_target_dir = config_get_app_target_dir(config)
    os.chdir(app_target_dir)
    os.system('\"'+sys.executable+'\"' + ' scripts/update_res.py res')
    # 此步生成映像的assets_web.js
    os.system('\"'+sys.executable+'\"' + ' scripts/update_res.py json')
    os.system('\"'+sys.executable+'\"' + ' scripts/update_res.py web')
    os.chdir(cwd)

2.build_awtk_js:为映像生成awtk.js,awtk_asm.js,awtk_asm.wasm

步骤一:将AWTK_SRC_DIR下所有c库文件(awtk.getWebFiles()获取), awtk-web目录下符合正则src/c/*.c的所有文件(web_files), gen/c/awtk_wrap.c(如果目标项目是由js构成),以及项目build.json的sources属性指定的所有c/cpp源文件,加入文件列表all_files,并用emscripten自带的emcc编译, 输出awtk.js和awtk_asm.js。

python 复制代码
def build_awtk_js(src_app_root, config, flags):
    app_target_dir = config_get_app_target_dir(config)
    app_files = []
	
    #如果目标项目是js类型,将awtk-web的gen/c/awtk_wrap.c加入
    if(is_js_app(config)):
        app_files.append(join_path('./', 'gen/c/awtk_wrap.c'))
	
    #提取目标项目的所有c源文件加入到app_files列表供编译
    #源文件路径取自目标项目build.json的sources列表
    sources = config['sources']
    for f in sources:
        if f.endswith('.c') or f.endswith('.cpp'):
            app_files = app_files + glob.glob(f)
	
    #提取awtk-web的所有c源文件加入web_files列表供编译
    web_files = glob.glob('src/c/*.c')
    
    #awtk.getWebFiles()获取awtk目标下所有库文件依赖,包括tkc,base,widget等库
    #将所有编译文件加入列表
    files = awtk.getWebFiles() + web_files + app_files

    all_files = []
    for f in files:
        all_files.append(os.path.normpath(os.path.abspath(f)))
	
    # 将目标项目的res加入编译器的include选项
    # includes_path = -ID:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\res
    includes_path = ' -I' + join_path(app_target_dir, 'res') + ' '

    if 'includes' in config:
        includes_files = config['includes']
        for f in includes_files:
            includes_path += ('-I ' + f + " ")
	
    # 生成编译flag
    COMMON_FLAGS = ' ' + flags + ' '
    
    if 'cflags' in config:
        COMMON_FLAGS = COMMON_FLAGS + ' ' + ' '.join(config['cflags'])
    if 'cxxflags' in config:
        COMMON_FLAGS = COMMON_FLAGS + ' ' + ' '.join(config['cxxflags'])

    COMMON_FLAGS = COMMON_FLAGS + ' -DSAFE_HEAP=1 -DASSERTIONS=1 -DSTACK_OVERFLOW_CHECK=1 '
    COMMON_FLAGS = COMMON_FLAGS + \
        ' -s EXPORTED_RUNTIME_METHODS=@configs/export_runtime_funcs.json '
    COMMON_FLAGS = COMMON_FLAGS + '-s ALLOW_MEMORY_GROWTH=1 -s USE_SDL=2'

	# 如果目标项目是js类型将附加的编译选项
    if(is_js_app(config)):
        COMMON_FLAGS = COMMON_FLAGS + ' -DAWTK_WEB_JS '
        COMMON_FLAGS = COMMON_FLAGS + ' -s RESERVED_FUNCTION_POINTERS=1000 '

    COMMON_FLAGS = COMMON_FLAGS + ' -s EXPORTED_FUNCTIONS=@gen/export_all_funcs.json'

    COMMON_FLAGS = COMMON_FLAGS + ' -DWITH_DATA_READER_WRITER '
    COMMON_FLAGS = COMMON_FLAGS + ' -DHAS_STD_MALLOC -DNDEBUG -DAWTK_WEB -Isrc/c '
    COMMON_FLAGS = COMMON_FLAGS + ' -DWITH_WINDOW_ANIMATORS -DWITH_NANOVG_GPU '
   # COMMON_FLAGS = '  -g4 -gsource-map   -DSAFE_HEAP=1 -DASSERTIONS=1 -DSTACK_OVERFLOW_CHECK=1  -s EXPORTED_RUNTIME_METHODS=@configs/export_runtime_funcs.json -s ALLOW_MEMORY_GROWTH=1 -s USE_SDL=2 -s EXPORTED_FUNCTIONS=@gen/export_all_funcs.json -DWITH_DATA_READER_WRITER  -DHAS_STD_MALLOC -DNDEBUG -DAWTK_WEB -Isrc/c  -DWITH_WINDOW_ANIMATORS -DWITH_NANOVG_GPU '

#输出对应的js文件
#output=D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\js\\awtk.js
    output = join_path(config_get_js_dir(config), "awtk.js")
    CPPFLAGS_JS = ' -o ' + output + ' -s WASM=0 ' + COMMON_FLAGS + includes_path
    awtk.runArgsInFile('emcc -v ', CPPFLAGS_JS, all_files)
#output=D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\js\\awtk_asm.js
    output = join_path(config_get_js_dir(config), "awtk_asm.js")
    CPPFLAGS_ASM = ' -o ' + output + COMMON_FLAGS + includes_path
    awtk.runArgsInFile('emcc -v ', CPPFLAGS_ASM, all_files)

运行 awtk.runArgsInFile之后系统将输出一大堆文件编译,总共三百多个文件,耐心等待,日志看着一大坨很乱:

 -o D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\js\\awtk.js -s WASM=0   
 -g4 -gsource-map   
 -DSAFE_HEAP=1 -DASSERTIONS=1 
 -DSTACK_OVERFLOW_CHECK=1  
 -s EXPORTED_RUNTIME_METHODS=@configs/export_runtime_funcs.json 
 -s ALLOW_MEMORY_GROWTH=1 
 -s USE_SDL=2 -s EXPORTED_FUNCTIONS=@gen/export_all_funcs.json 
 -DWITH_DATA_READER_WRITER  
 -DHAS_STD_MALLOC 
 -DNDEBUG 
 -DAWTK_WEB 
 -Isrc/c  
 -DWITH_WINDOW_ANIMATORS 
 -DWITH_NANOVG_GPU  
 -ID:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\res  
 -ID:\\Devtools\\awtk/3rd 
 -ID:\\Devtools\\awtk 
 -ID:\\Devtools\\awtk\\src 
 -ID:\\Devtools\\awtk\\src/ext_widgets D:\\Devtools\\awtk\\src\\tkc\\action_darray_thread.c D:\\Devtools\\awtk\\src\\tkc\\action_queue.c D:\\Devtools\\awtk\\src\\tkc\\action_thread.c 
 ...
 (省略awtk库的一堆c文件)
emcc: warning: please replace -g4 with -gsource-map [-Wdeprecated]
"D:/Devtools/emsdk/upstream/bin\clang.exe" -target wasm32-unknown-emscripten -fignore-exceptions -fvisibility=default -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr --sysroot=D:\Devtools\emsdk\upstream\emscripten\cache\sysroot -DEMSCRIPTEN -Werror=implicit-function-declaration -isystem D:\Devtools\emsdk\upstream\emscripten\cache\sysroot\include\SDL2 -Xclang -iwithsysroot/include\compat -v -g3 -g -DSAFE_HEAP=1 -DASSERTIONS=1 -DSTACK_OVERFLOW_CHECK=1 -DWITH_DATA_READER_WRITER -DHAS_STD_MALLOC -DNDEBUG -DAWTK_WEB -Isrc/c -DWITH_WINDOW_ANIMATORS -DWITH_NANOVG_GPU -ID:\Devtools\awtk-web\webroot\AwtkApplication3\res -ID:\Devtools\awtk/3rd -ID:\Devtools\awtk -ID:\Devtools\awtk\src -ID:\Devtools\awtk\src/ext_widgets D:\Devtools\awtk\src\tkc\action_darray_thread.c -c -o C:\Users\nihaoa\AppData\Local\Temp\emscripten_temp_256cz5b6\action_darray_thread_0.o
clang version 19.0.0git (https:/github.com/llvm/llvm-project 6c7805d5d186a6d1263f90b8033ad85e2d2633d7)
Target: wasm32-unknown-emscripten
Thread model: posix
InstalledDir: D:\Devtools\emsdk\upstream\bin
 (in-process)
 "D:\\Devtools\\emsdk\\upstream\\bin\\clang.exe" -cc1 -triple wasm32-unknown-emscripten -emit-obj -mrelax-all -disable-free -clear-ast-before-backend -disable-llvm-verifier -discard-value-names -main-file-name action_darray_thread.c -mrelocation-model static -mframe-pointer=none -ffp-contract=on -fno-rounding-math -mconstructor-aliases -target-cpu generic -debug-info-kind=constructor -dwarf-version=4 -debugger-tuning=gdb "-fdebug-compilation-dir=D:\\Devtools\\awtk-web" -v "-fcoverage-compilation-dir=D:\\Devtools\\awtk-web" -resource-dir "D:\\Devtools\\emsdk\\upstream\\lib\\clang\\19" -isystem "D:\\Devtools\\emsdk\\upstream\\emscripten\\cache\\sysroot\\include\\SDL2" -D EMSCRIPTEN -D SAFE_HEAP=1 -D ASSERTIONS=1 -D STACK_OVERFLOW_CHECK=1 -D WITH_DATA_READER_WRITER -D HAS_STD_MALLOC -D NDEBUG -D AWTK_WEB -I src/c -D WITH_WINDOW_ANIMATORS -D WITH_NANOVG_GPU -I "D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\res" -I "D:\\Devtools\\awtk/3rd" -I "D:\\Devtools\\awtk" -I "D:\\Devtools\\awtk\\src" -I "D:\\Devtools\\awtk\\src/ext_widgets" -isysroot "D:\\Devtools\\emsdk\\upstream\\emscripten\\cache\\sysroot" -internal-isystem "D:\\Devtools\\emsdk\\upstream\\lib\\clang\\19\\include" -internal-isystem "D:\\Devtools\\emsdk\\upstream\\emscripten\\cache\\sysroot/include/wasm32-emscripten" -internal-isystem "D:\\Devtools\\emsdk\\upstream\\emscripten\\cache\\sysroot/include" -Werror=implicit-function-declaration -ferror-limit 19 -fmessage-length=230 -fvisibility=default -fgnuc-version=4.2.1 -fskip-odr-check-in-gmf -fignore-exceptions -fcolor-diagnostics "-iwithsysroot/include\\compat" -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr -o "C:\\Users\\nihaoa\\AppData\\Local\\Temp\\emscripten_temp_256cz5b6\\action_darray_thread_0.o" -x c "D:\\Devtools\\awtk\\src\\tkc\\action_darray_thread.c"
clang -cc1 version 19.0.0git based upon LLVM 19.0.0git default target x86_64-pc-windows-msvc
ignoring nonexistent directory "D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include/wasm32-emscripten"
#include "..." search starts here:
#include <...> search starts here:
 src/c
 D:\Devtools\awtk-web\webroot\AwtkApplication3\res
 D:\Devtools\awtk/3rd
 D:\Devtools\awtk
 D:\Devtools\awtk\src
 D:\Devtools\awtk\src/ext_widgets
 D:\Devtools\emsdk\upstream\emscripten\cache\sysroot\include\SDL2
 D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include\compat
 D:\Devtools\emsdk\upstream\lib\clang\19\include
 D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include
End of search list.
。。。(省略后面三百多个文件的编译)
 "D:/Devtools/emsdk/upstream/bin\clang.exe" -target wasm32-unknown-emscripten -fignore-exceptions -fvisibility=default -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr --sysroot=D:\Devtools\emsdk\upstream\emscripten\cache\sysroot -DEMSCRIPTEN -Werror=implicit-function-declaration -isystem D:\Devtools\emsdk\upstream\emscripten\cache\sysroot\include\SDL2 -Xclang -iwithsysroot/include\compat -v -g3 -g -DSAFE_HEAP=1 -DASSERTIONS=1 -DSTACK_OVERFLOW_CHECK=1 -DWITH_DATA_READER_WRITER -DHAS_STD_MALLOC -DNDEBUG -DAWTK_WEB -Isrc/c -DWITH_WINDOW_ANIMATORS -DWITH_NANOVG_GPU -ID:\Devtools\awtk-web\webroot\AwtkApplication3\res -ID:\Devtools\awtk/3rd -ID:\Devtools\awtk -ID:\Devtools\awtk\src -ID:\Devtools\awtk\src/ext_widgets D:\AWStudioProjects\Workspace\AwtkApplication3\src\main.c -c -o C:\Users\nihaoa\AppData\Local\Temp\emscripten_temp_vom058uh\main_313.o
clang version 19.0.0git (https:/github.com/llvm/llvm-project 6c7805d5d186a6d1263f90b8033ad85e2d2633d7)
Target: wasm32-unknown-emscripten
Thread model: posix
InstalledDir: D:\Devtools\emsdk\upstream\bin
 (in-process)
 "D:\\Devtools\\emsdk\\upstream\\bin\\clang.exe" -cc1 -triple wasm32-unknown-emscripten -emit-obj -mrelax-all -disable-free -clear-ast-before-backend -disable-llvm-verifier -discard-value-names -main-file-name main.c -mrelocation-model static -mframe-pointer=none -ffp-contract=on -fno-rounding-math -mconstructor-aliases -target-cpu generic -debug-info-kind=constructor -dwarf-version=4 -debugger-tuning=gdb "-fdebug-compilation-dir=D:\\Devtools\\awtk-web" -v "-fcoverage-compilation-dir=D:\\Devtools\\awtk-web" -resource-dir "D:\\Devtools\\emsdk\\upstream\\lib\\clang\\19" -isystem "D:\\Devtools\\emsdk\\upstream\\emscripten\\cache\\sysroot\\include\\SDL2" -D EMSCRIPTEN -D SAFE_HEAP=1 -D ASSERTIONS=1 -D STACK_OVERFLOW_CHECK=1 -D WITH_DATA_READER_WRITER -D HAS_STD_MALLOC -D NDEBUG -D AWTK_WEB -I src/c -D WITH_WINDOW_ANIMATORS -D WITH_NANOVG_GPU -I "D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\res" -I "D:\\Devtools\\awtk/3rd" -I "D:\\Devtools\\awtk" -I "D:\\Devtools\\awtk\\src" -I "D:\\Devtools\\awtk\\src/ext_widgets" -isysroot "D:\\Devtools\\emsdk\\upstream\\emscripten\\cache\\sysroot" -internal-isystem "D:\\Devtools\\emsdk\\upstream\\lib\\clang\\19\\include" -internal-isystem "D:\\Devtools\\emsdk\\upstream\\emscripten\\cache\\sysroot/include/wasm32-emscripten" -internal-isystem "D:\\Devtools\\emsdk\\upstream\\emscripten\\cache\\sysroot/include" -Werror=implicit-function-declaration -ferror-limit 19 -fmessage-length=230 -fvisibility=default -fgnuc-version=4.2.1 -fskip-odr-check-in-gmf -fignore-exceptions -fcolor-diagnostics "-iwithsysroot/include\\compat" -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr -o "C:\\Users\\nihaoa\\AppData\\Local\\Temp\\emscripten_temp_vom058uh\\main_313.o" -x c "D:\\AWStudioProjects\\Workspace\\AwtkApplication3\\src\\main.c"
clang -cc1 version 19.0.0git based upon LLVM 19.0.0git default target x86_64-pc-windows-msvc
ignoring nonexistent directory "D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include/wasm32-emscripten"
#include "..." search starts here:
#include <...> search starts here:
 src/c
 D:\Devtools\awtk-web\webroot\AwtkApplication3\res
 D:\Devtools\awtk/3rd
 D:\Devtools\awtk
 D:\Devtools\awtk\src
 D:\Devtools\awtk\src/ext_widgets
 D:\Devtools\emsdk\upstream\emscripten\cache\sysroot\include\SDL2
 D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include\compat
 D:\Devtools\emsdk\upstream\lib\clang\19\include
 D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include
End of search list.
"D:/Devtools/emsdk/upstream/bin\clang.exe" --version
"D:/Devtools/emsdk/upstream/bin\wasm-ld.exe" @C:\Users\nihaoa\AppData\Local\Temp\emscripten_e9gcm659.rsp.utf-8
"D:\Devtools\emsdk\python\3.9.2-nuget_64bit\python.exe" -E D:\Devtools\emsdk\upstream\emscripten\tools\wasm-sourcemap.py D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm --dwarfdump=D:/Devtools/emsdk/upstream/bin\llvm-dwarfdump.exe -o D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm.map --basepath=D:\Devtools\awtk-web\webroot\AwtkApplication3\js
 "D:/Devtools/emsdk/upstream/bin\llvm-objcopy.exe" D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm --remove-section=.debug* --remove-section=producers
 "D:/Devtools/emsdk/upstream\bin\wasm-emscripten-finalize" -g --dyncalls-i64 --pass-arg=legalize-js-interface-exported-helpers --dwarf --output-source-map-url=awtk_asm.wasm.map D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm -o D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm --detect-features --input-source-map=D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm.map --output-source-map=D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm.map
emcc: warning: `main` is defined in the input files, but `_main` is not in `EXPORTED_FUNCTIONS`. Add it to this list if you want `main` to run. [-Wunused-main]
 "D:/Devtools/emsdk/node/16.20.0_64bit/bin/node.exe" D:\Devtools\emsdk\upstream\emscripten\src\compiler.mjs C:\Users\nihaoa\AppData\Local\Temp\tmpwpa968vp.json

awtk.runArgsInFile源代码:

python 复制代码
def getIncludes():
    return '-I' + AWTK_ROOT_DIR + '/3rd ' + '-I' + AWTK_ROOT_DIR + ' -I' + AWTK_SRC_DIR +' -I' + AWTK_SRC_DIR +'/ext_widgets';


def writeArgs(filename, str):
    with open(filename, "w") as text_file:
        text_file.write(str);
	
def runArgsInFile(cmd, flags, files):
    cmd_args = flags + ' ' + getIncludes() + ' ' + ' '.join(files) 
    cmd_args = cmd_args.replace('\\', '\\\\');
    writeArgs("args.txt", cmd_args);
    print(cmd_args)
    os.system(cmd + ' @args.txt');

该步完成后会发现映像项目有一个js目录,多了3个文件:

PS D:\Devtools\awtk-web\webroot\AwtkApplication3\js> ls

目录: D:\Devtools\awtk-web\webroot\AwtkApplication3\js

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----         2024/5/28     17:05          82504 awtk_asm.js
-a----         2024/5/28     17:05        2226706 awtk_asm.wasm
-a----         2024/5/28     17:05         684260 awtk_asm.wasm.map

是以下指令生成的:

"D:/Devtools/emsdk/upstream/bin\wasm-ld.exe" 		@C:\Users\nihaoa\AppData\Local\Temp\emscripten_e9gcm659.rsp.utf-8

"D:\Devtools\emsdk\python\3.9.2-nuget_64bit\python.exe" 
-E 
	D:\Devtools\emsdk\upstream\emscripten\tools\wasm-sourcemap.py 
	D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm 
	--dwarfdump=D:/Devtools/emsdk/upstream/bin\llvm-dwarfdump.exe 
-o 
	D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm.map 
--basepath=D:\Devtools\awtk-web\webroot\AwtkApplication3\js

"D:/Devtools/emsdk/upstream/bin\llvm-objcopy.exe" 
D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm 
D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm 
--remove-section=.debug* 
--remove-section=producers

 "D:/Devtools/emsdk/upstream\bin\wasm-emscripten-finalize" 
 -g 
 	--dyncalls-i64 --pass-arg=legalize-js-interface-exported-helpers --dwarf --output-source-map-url=awtk_asm.wasm.map 
 	D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm
 -o 
 	D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm 
 	--detect-features --input-source-map=D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm.map 
 	--output-source-map=D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm.map
 	
emcc: warning: `main` is defined in the input files, but `_main` is not in `EXPORTED_FUNCTIONS`. Add it to this list if you want `main` to run. [-Wunused-main]
 "D:/Devtools/emsdk/node/16.20.0_64bit/bin/node.exe" D:\Devtools\emsdk\upstream\emscripten\src\compiler.mjs C:\Users\nihaoa\AppData\Local\Temp\tmpwpa968vp.json

3.build_awtk_web_js:为映像构建app.js和awtk_web.js

python 复制代码
def build_awtk_web_js(config):
    # 生成目标项目webroot的app.js[本质是把原项目的源js文件所有内容暴力整合到一个js文件下]
    build_app_js(config)
    
    """
    app_target_dir= 'D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3'
    assets_js= 'D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\assets_web.js'
    outfile = 'D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\js\\awtk_web.js'
    """
    app_target_dir = config_get_app_target_dir(config)
    assets_js = join_path(app_target_dir, 'assets_web.js')
    outfile = join_path(config_get_js_dir(config), 'awtk_web.js')
   
	# 在awtk-web目录下生成app_config.js文件,与assets_web.js和下列js文件用于构建awtk_web.js
    gen_app_config(config, 'gen/app_config.js')
    awtk_web_js_files = [assets_js,
                         'src/js/browser.js',
                         'gen/app_config.js',
                         'src/js/webgl2d.js',
                         'src/js/image_cache.js',
                         'src/js/assets_manager.js',
                         'src/js/image_loader.js',
                         'src/js/input_method_web.js',
                         'src/js/utils.js',
                         'src/js/edit_element.js',
                         'src/js/vgcanvas_web.js',
                         'src/js/awtk_wrap.js',
                         'src/js/key_event.js',
                         'src/js/events_source.js',
                         'src/js/main_loop_web.js']
    merge_files(awtk_web_js_files, outfile)
python 复制代码
def merge_files(srcs, dst):
    print(dst)
    with open(dst, 'w') as outfile:
        for fname in srcs:
            print(fname)
            with open(fname, encoding='utf-8-sig') as infile:
                outfile.write(infile.read())
                outfile.write("\n")

def need_awtk_api_js(config):
    return is_js_app(config) and not is_reactjs(config)

#将目标项目build.json下source选项指定的js文件合成一个新的app.js文件,放到webroot对应映像下
def build_app_js(config):
    app_files = []
    sources = config['sources']
    #output='D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\js\\app.js'
    output = join_path(config_get_js_dir(config), 'app.js')
    #对于js类型项目须加入两个js文件
    if(need_awtk_api_js(config)):
        app_files.append('api/awtk_api_browser_prefix.js')
        app_files.append('api/awtk_api.js')
    #如果目标项目下有js文件,加入app_files列表
    for f in sources:
        if f.endswith('.js'):
            app_files = app_files + glob.glob(join_path(app_root, f))
    #app_files下所有js文件内容合并到app.js
    merge_files(app_files, output)
    print(app_files, output)
    

该步完成后映像项目下js目录将多出app.js和awtk_web.js两个文件:

PS D:\Devtools\awtk-web\webroot\AwtkApplication3\js> ls


    目录: D:\Devtools\awtk-web\webroot\AwtkApplication3\js


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----         2024/5/28     17:11              0 app.js
-a----         2024/5/28     17:05          82504 awtk_asm.js
-a----         2024/5/28     17:05        2226706 awtk_asm.wasm
-a----         2024/5/28     17:05         684260 awtk_asm.wasm.map
-a----         2024/5/28     17:11         140526 awtk_web.js

自此编译过程结束。

上面的例子是awtk c项目,如果是js项目,编译列表会略有变化,具体自己实验。

相关推荐
黑客老陈1 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
运维·服务器·前端·网络·安全·web3·xss
正小安1 小时前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)
前端·vite
m0_748256781 小时前
WebGIS实战开源项目:智慧机场三维可视化(学习笔记)
笔记·学习·开源
红色的山茶花1 小时前
YOLOv9-0.1部分代码阅读笔记-loss.py
笔记
暴富的Tdy1 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se1 小时前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel
m0_748235612 小时前
web 渗透学习指南——初学者防入狱篇
前端
z千鑫2 小时前
【前端】入门指南:Vue中使用Node.js进行数据库CRUD操作的详细步骤
前端·vue.js·node.js