源码debug

  1. 用vscode打开鸿蒙demo项目
  2. 打开调试终端Javscript Debug Terminal
    image.png
  3. 执行/Applications/DevEco-Studio.app/Contents/tools/node/bin/node /Applications/DevEco-Studio.app/Contents/tools/hvigor/bin/hvigorw.js clean --mode module -p product=default assembleHap --debug --analyze=advanced --parallel --incremental --no-daemon --trace-warnings命令
    接下来我们就可以在源码中开始愉快的断点调试啦~

源码解析

编译源码的工具

rollup,鸿蒙havigor里面是通过rollup去编译ets源码文件的,
相信熟悉前端的小伙伴都对这个工具不陌生,没错,就是跟前端常用构建工具webpack齐名的rollup,它在前端领域更常见用来编译类库

用的所有rollup插件

|—— CommonPlugin
|—— invalidCachePlugin
|—— oh-resolve
|—— routerMapPlugin
|—— newOhmUrlPlugin
|—— sensitiveCheckPlugin
|—— moduleInfoMetaPlugin
|—— commonjs
|—— gcPlugin
|—— json
|—— wrapperChunkPlugin
|—— waitAsyncPlugin
|—— collectImportsPlugin
|—— watchChangedFiles
|—— etsChecker
|—— visualTransform
|—— etsTransform
|—— apiTransform
|—— buildInstrument
|—— genAbc
|—— createProgramPlugin
|—— delete

生成代码插件之rollup-plugin-gen-abc

这个插件所在地址为/Applications/DevEco-Studio.app/Contents/sdk/default/openharmony/ets/build-tools/ets-loader/lib/fast_build/ark_compiler/rollup-plugin-gen-abc.js

源码

function genAbc() {
  var e = this;
  return {
    name: "genAbc",
    buildStart() {
      ...
    },
    shouldInvalidCache: _cache.shouldInvalidCache,
    transform: _transform.transformForModule,
    beforeBuildEnd: ...,
    buildEnd: _generate_module_abc.generateModuleAbc,
    generateBundle: ...,
    cleanUp: ...,
}

先来分析下transform

hook: transform

transform在rollup插件的职责是转换编译文件,而在这个插件中还额外多做了一步
image.png
可以清楚的看到转换完后,它还把转换完的结果存到了全局收集器中去,方便接下来的buildEnd去根据收集器里收集到的模块做下一步处理

hook: buildEnd

buildEnd对应的generateModuleAbc这一步就开始处理上述transform里收集到的一个个编译后的模块将其输出文件产物

实战 (篡改编译产物)

相信对很多小伙伴来说,这是大家最感兴趣的部分了,前面的讲解都是为了让大家知其然知其所以然🧨

结尾

我们已经展示了如何简单的修改编译产物了,相信富含想象力的大伙们脑子里已经有万千变种用法可以结合自己的实际项目让其发挥最大魔力了

FAQ

1. 我的源码调试打的断点咋不生效?

要把源码拖到和当前应用所在的同一vscode窗口内,这也是我比较疑惑的点,大家可以去研究下断点机制有没更好的办法能跨窗口打断点


drdevelop
2 声望1 粉丝