C/C++教程

Chameleon源码剖析(零)-前言

本文主要是介绍Chameleon源码剖析(零)-前言,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

近几年随着移动互联网的发展,尤其各个端平台推出了小程序入口,比如微信、支付宝、头条等,不同端平台之间的语法规范不统一,代码组织结构复杂,开发者早期应对同样的业务需求,需要在各端平台上各自维护一套代码,开发成本高,难以满足高效快速的日常维护。对于开发效率上的极致追求,使得"一次编写,到处运行"的跨端融合述求在前端领域里进一步提高。从本质上讲,跨端融合就是统一多端开发模式,增加代码复用,降低开发成本、保证多端一致性的体验。

目前前端领域已发展出多种不同的跨端解决方案,比如Chameleon、Taro、Mpvue等,这些跨端解决方案的核心解决思路是一致的,基本上都是编译+runtime运行时的解决模式。编译指的是利用Babel的编译能力和WebPack提供的loader、plugin等构建能力,对源代码进行一系列分析流程之后,对原始代码进行优化并根据不同的端平台转换,最终得到目标代码。

编译过程
runtime指的是各个解决方案转换成各目标代码所需要的运行时依赖。不同跨端解决方案在runtime的实现细节和具体功能上存在一定的差异性,这里不一一列举。

在各个跨端解决方案中,Chameleon(简写 CML )是一款真正专注于让一套代码运行多端的跨端框架,始终秉承 "一套代码运行多端,一端所见即多端所见" 的初心,多端高度一致,无需关注各端的文档。目前CML已经成功扩展支持全平台小程序(微信、支付宝、百度、qq、头条),未来更会扩展到更多的端平台应用。 本系列教程主要介绍Chameleon跨端框架背后的实现机制,针对源码进行深度剖析,系统分析了整个跨端框架背后的基本原理,包括:CML的命令行注册运行、WebPack配置、路由实现、模板解析能力、工程化配置方案、核心编译加载器loader和插件plugin、分包实现等。 整个系列教程最好和CML的源码配合,读者需要先了解整个的CML的整体架构和断点开发调试。

整体架构

CML基于底层的打包构建工具,配合chamleon-runtime运行时和统一的多端接口chammeleon-api, 将通过统一的语言框架 + 统一的多态协议组合成的多端业务代码转换成多端目标代码。

整个CML源码主要可分为三个部分打包构建、核心运行时、统一API。

打包构建

点击此处访问打包构建仓库 打包构建仓库的packages文件夹中主要包含了构建CML项目时所依赖的npm模块,eg:chameleon-tool脚手架、webpack构建时所需要的loader和plugin、数据mock服务等。 CML通过webpack构建工具,对统一的语言.cml文件解析,对解析后template、script、style部分分别引入不同的依赖模块和特殊的端处理模块,最终将原始的cml代码转换成目标各端代码。

每个构架依赖包在CML项目构建环节中都充当不同的作用,这里先整理了构建仓库中比较核心的npm模块包作用,后续的系列教程也会对涉及到的依赖包进行详细剖析。

npm模块名称 作用
chameleon-tool 构建脚手架
chameleon-linter 负责chameleon业务项目中的代码规范校验
chameleon-loader 负责处理cml文件和多态组件中的原生小程序
chameleon-css-loader 负责style部分的预处理
chameleon-template-parse 负责cml文件模板语法编译
chameleon-mixins 负责运行时VM对象的mixins度效果
interface-loader 负责处理接口多态interface文件
chameleon-miniapp-target 负责小程序中改变文件模板
chameleon-dev-proxy 负责dev命令时的代理构建服务
chameleon-templates 负责所有初始化的模板
chameleon-tool-utils 输出打包构建相关的公共方法

构建依赖包众多,每个依赖包可能会互相引用,使用npm link将每个依赖包放到全局node_modules中使用,将会整个仓库维护起来特别繁琐。所以构建仓库使用了基于lerna的基本工作流,解决packages中不同包相互依赖的问题。 学习lerna可以查阅如下资料: lerna官方文档 lerna管理前端packages的最佳实践

核心运行时

点击此处访问核心运行时仓库 核心运行时仓库是CML转换后目标各端代码在各端运行时所需要相关代码,独立于打包构建仓库。 开发者在使用如下命令初始化项目时,整个业务项目会依赖chameleon-runtime提供的运行时的能力

cml init
复制代码

chameleon-runtime对外导出以外方法,供构建仓库中的chameleon-tool使用:

  • bootstrap启动应用
  • createApp创建App
  • createPage创建页面
  • createComponent创建组件

后续的系列教程也会涉及到整个运行时进行详细剖析。

统一API

点击此处访问统一API仓库 本仓库为chameleon的api的相关代码,chameleon 支持大量基础API,对外提供统一的接口,以模块的方式引入chameleon-api进行使用。 点击此处查阅接口及扩展文档

断点开发调试

阅读源码无法避免进行断点开发调试。断点调试方案主要使用如下两种方案:利用v8自带的检查器连接chrome进行调试和利用IDE(VsCode)工具进行调试

利用v8自带的检查器连接chrome进行调试

整体脚手架调试都是基于Node层面进行调试,Node的V8 检查器集成允许将 Chrome 开发者工具附加到 Node.js 实例以进行调试和性能分析。 如果开发者已经在全局安装了chameleon-tool构建工具,开发者即可在终端输入cml -v命令查看CML在全局环境的安装路由:

current running chameleon(/Users/didi/.nvm/versions/node/v10.16.3/lib/node_modules/chameleon-tool/)
复制代码

在当前项目下找到chameleon.js入口文件,将入口文件的如下内容取消注释,即可开始调试:

#! /usr/bin/env node
// --inspect-brk
复制代码

更多的有关于v8自带的检查器连接chrome进行调试方案见debugger Nodejs API文档

优点: 便于基于已有的项目快速进行调试chameleon-tool 缺点: 对于chameleon-tool所依赖的模块包无法快速切换调试;容易对已有正确的chameleon-tool构建工具造成污染

利用IDE(VsCode)自带的工具进行调试

1、从远程仓库克隆到本地

git clone https://github.com/didi/chameleon.git
复制代码

2、使用VsCode项目打开此项目,然后按照下图的步骤创建launch.json

创建launch.json
launch.json的内容如下:

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "CML测试",
      "program": "${workspaceFolder}/packages/chameleon-tool/chameleon.js",
      "args": ["wx", "dev"],
      "cwd": "/Users/didi/WorkSpace/hummer-dsl-cml-test"
    }
  ]
}
复制代码

上面的launch.json中配置解析如下:

  • program表示当前构建仓库的chameleon-tool的入口文件
  • args表示要运行命令,读者可以改成其他运行命令
  • cwd表示构建好的项目仓库地址,读者可以改成自己构建好的项目仓库地址

launch.json配置好后,读者可以在克隆下来的本地构建仓库项目中随意增加断点,然后点击运行和调试按钮,即可进入调试。 更多有关通过VsCode进行调试见Debugging in Visual Studio Code

参考文献

lerna官方文档 lerna管理前端packages的最佳实践 debugger Nodejs API文档 Debugging in Visual Studio Code

这篇关于Chameleon源码剖析(零)-前言的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!