CML，一套代码运行多端，一端所见即多端所见GitHub: https://github.com/didi/chameleon【版本公布】chameleon-tool@1.0.8-alpha.1 反对多页面构建hash、history模式下适配多页面预览页面跳转以及二维码适配本地服务配置反对多页面配置工程化配置适配多页面路由文件反对配置多页面参数【案例/解决方案】web多页面构建demo【官网文档更新】路由配置 路由懒加载配置如何应用动静组件多页面构建【CML2.0】反对typescript ，进度50%【组件扩大】c-design 实现table tag组件
CML，一套代码运行多端，一端所见即多端所见GitHub: https://github.com/didi/chameleon【版本公布】chameleon-tool@1.0.8-alpha.0 公布 反对chameleon-api-miniapp按需加载反对组件动静加载反对路由懒加载根本应用demo参考：https://github.com/chameleon-...【New-Feature】反对web端多页面构建，批改能力点如下： 路由配置反对 web 端多页面配置HtmlWebpackPlugin 适配多页面构建本地开发适配 history 和 hash 路由两种模式预览页面反对 web 端多页面构建调试【小程序端能力加强】chameleon-api-mini chameleon-ui-mini 官网开发进度10%【组件扩大】c-design 实现 radio input-number loading progress 组件【close-issue】内部奉献解决方案
简介Chameleon模板解析引擎承载了模板局部的语法转化、款式适配、事件零碎适配、语法能力扩大和加强，反对CMl和类Vue两套语法，反对多端的模板解析，接下来让咱们来理解下其背地的实现原理吧 作者简介王梦君 滴滴出行资深前端工程师 Chameleon框架外围开发成员 前言Chameleon作为一个优良的跨多端框架，想要实现"跨多端"这个外围指标，除了工程化配置之外，DSL层面对于各个端的转化的能力也是必不可少的，接下来将为大家介绍CML是如何做DSL层面的转化的。 因为这部分只波及到模板局部，也就是template标签中的内容转化，接下来所有提到的DSL都指的是 模板内容 0 DSL转化的指标是？反对两种模板语法，不便小程序和web开发者零老本学习应用一套模板转化出适配多端的代码，一次开发，多端运行反对新端的疾速扩大比方CML的语法 <view c-if="{{true}}">{{message}}<view>要转化成其余端如下语法 比方原生的vue/weex的template模板语法 <div v-if="true">{{message}}<div>原生的小程序端的语法 微信小程序 <view wx:if="{{true}}">{{message}}</view>支付宝小程序 <view a:if="{{true}}">{{message}}</view>百度小程序 <view s:if="true">{{message}}</view>根本的指标是： 1 如何设计实现？整体架构鉴于以上的指标，CML的模板解析的整体架构如下图所示 外围点是利用 babel 转化为 ast 语法树，在对 ast 语法树解析的过程中，对于每个节点通过 tapable 管制该节点的解决形式，比方标签解析、款式语法解析、循环语句、条件语句、原生组件应用、动静组件解析等，达到适配不同端的需要，各端适配相互独立，互不影响，反对疾速适配多端。 目录构造.├── common│ ├── cml-map.js //各端标签替换map│ ├── process-template.js //模板前置解决、后置解决│ └── utils.js //专用函数├── compile-template-cml.js //cml语法解析入口├── compile-template-vue.js //vue语法解析入口├── index.js //入口文件，对vue和cml语法进行辨别└── parser ├── index.js //所有的parser的对立入口 ├── parse-animation-tag.js //解析动画标签 ├── parse-attribute.js //解析标签属性 ├── parse-class.js //解析class，反对动静class ├── parse-condition.js //解析条件语句 ├── parse-directive.js //解析指令语法 ├── parse-event.js //解析事件代理，事件传参等 ├── parse-interation.js //解析循环语句 ├── parse-ref.js //解析ref ├── parse-style.js //解析style节点，反对动静style └── parse-vue2wx.js //解析vue语法所有源码具体参考 ...
CML，一套代码运行多端，一端所见即多端所见GitHub: https://github.com/didi/chameleon最新动态【版本发布】 chameleon-tool@1.0.6-alpha.6 发布 web 端 dev 模式下如何支持跨域构建过程警告信息支持配置是否输出，可以排查重复 npm 包的安装压缩过程删除多余 consolewindows 下 subProject 配置 npmName 的路径适配修复修复项目内安装 cli 通过 npm 脚本构建全局变量校验问题【组件扩展】 c-design 完成 cd-picker cd-icon 组件【规范和建议】 新增 web 端本地开发如何跨域教程，参考优化项目体积优化教程，参考【close-issues】 weex 多 bundle 构建支持 android 和 ios 如何接入 CMl小程序端模板语法问题【外部pr】 text-area 组件 refresh-view 组件 感谢 QwangMobile