wcc.js是wxml文件和wxs文件编译器的nodejs实现

wxss文件编译器的nodejs实现，可以查看wcsc.js

目标：

• 二级制文件wcc实现为nodejs模块wcc.js
• 完善的测试用例支持
• 完善的性能测试
• 客观的编译性能

npm安装wcc.js依赖：

npm install wcc.js --save

代码示例：

let WCC = require('wcc.js');
let wccCompileConfig = {
  cmd: ['-d', '-cc', '-gn', '$gwx'], //指定运行的参数
  FILESBASE: [
    '/Users/xxx/proj/miniprogram/proj1/' //项目文件的目录
  ],
  FILES: [
    "./pages/index/index.wxml", // 在FILESBASE目录下的项目文件列表
  ]
};
WCC(wccCompileConfig).then(function (wccRes) {
  /*wccRes: {code: 'output code', templatesObjs: {}}*/
  let code = wccRes.code; // 编译后的代码
}).catch(function (err) {
  /*err: {code: -1, message: 'error message'}*/
  console.error(err);
});

git https://github.com/caijw/wcc.js.git
cd wcc.js
npm install

支持macOs和windows，不支持linux

1 正向用例（wcc.js和wcc的正常运行且运行结果必须完全一致）

npm run test

2 反向用例（wcc.js和wcc都必须运行报错，提示开发者报错信息，报错信息不要求完全一致）

npm run test:fail

支持macOs和windows，不支持linux

npm run benchmark

微信开发者工具中的二进制编译器，用来将wxml和wxs文件，编译成js文件，

js文件在jsCore中执行后，可以得到$gwx函数，$gwx函数用来生成渲染页面

需要的虚拟dom节点的原始数据。

mac版本wcc文件地址: https://github.com/caijw/wcc.js/blob/master/test/wcc

windows版本wcc文件地址: https://github.com/caijw/wcc.js/blob/master/test/wcc.exe

如何获得wcc？ 下载mac版本微信开发者工具，安装后，打开Applications目录，找到微信开发者工具，右键Show Package Contents，在Contents/Resources/package.nw/js/vender/wcc（该目录可能会被调整）。

参考文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html

参考文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

参考文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/conditional.html

参考文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html

参考文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/import.html

wcc [-d] [-o OUTPUT] [-xc XComponentDefine] [-om XComponentDefine] [-cb [callback.js...]] <FILES... | -s <SINGLE_FILE>

debug info，wxml模板的调试信息输出，主要是在目标代码执行报错后

输出文件解析的位置信息。

已经完美支持。

输出完整的自定义组件代码

已经完美支持。

debug info，wxs代码的调试信息输出

主要是在z数组中添加数据的文件名、行号和列号等信息

已经支持

输出简化的自定义组件代码

支持了部分特性，因为wcc的简化策略比较无规则，还没完美支持。

不支持

不支持

windows下，命令行参数太多会有问题，

当参数太长，将所有的命令行参数写入文件中，传递一个文件名给wcc

不支持，wcc.js的实现暂时不需要跨进程。

运行：

npm run test

npm run test:fail

测试样例地址：

https://github.com/caijw/wcc.js/tree/master/test/succSuit

https://github.com/caijw/wcc.js/tree/master/test/failSuit

完善的测试样例，换提交测试用例来继续完善该项目，以覆盖到大部分的场景。

正向用例-测试流程要点：

1. wcc.js将完整的小程序源码，编译成js代码code.wccjs.js
2. wcc将完整的小程序源码，编译成js代码code.wcc.js
3. 运行code.wccjs.js获取$gwx函数wccjs$gwx
4. 运行code.wcc.js获取$gwx函数wcc$gwx
5. 对于每个小程序页面path，运行wccjs$gwx获取渲染函数并运行该渲染函数，获取类似虚拟dom的数据结构path.wccjs.vd
6. 对于每个小程序页面path，运行wcc$gwx获取渲染函数并运行该渲染函数，获取类似虚拟dom的数据结构path.wcc.vd
7. 对比path.wccjs.vd和path.wccjs.vd是否完全一致

反向用例-测试流程要点：

测试样例均是不合法的样例

1. wcc.js编译样例项目，报错
2. wcc编译样例项目，报错
3. wcc.js和wcc是否都报错了

将wxs标签和wxs文件编译进行编译

参考文档：

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/02variate.html

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/03annotation.html

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/04operator.html

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/05statement.html

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/06datatype.html

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/07basiclibrary.html

运行：

npm run benchmark

复用了自动化测试的测试样例，对比测试了wcc.js和wcc编译相同的小程序项目的耗时对比

比较重要的是数据绑定的实现，具体可以参考https://github.com/caijw/wcc.js/tree/master/dataBinding.md

改造了htmlparser2的token解析部分的实现，基于有穷状态的自动机，解析token十分高效！

wxml解析生成的AST格式参考

欢迎提交测试样例，测试样例是完整的小程序源码，测试样例用来保证实现的正确性。

功能的实现可能不是很好，欢迎对代码进行改进。

提交前，前确保：

1. 测试样例全部通过
2. 确保改动后的性能不会变的太差