fix: 可视化

2025-07-07 00:02:14 +08:00 · 2022-02-03 12:03:38 +08:00 · 2022-02-03 12:03:38 +08:00 · 0a3d71d08f
commit 0a3d71d08f
parent cc00feb8b0
29 changed files with 19974 additions and 10 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -54,6 +54,7 @@ jobs:
          sudo find -maxdepth 1 -not -name ${{ env.name }} -not -name . -exec mv {} ${{ env.name }} \;
          ls -l
          sudo cp -r "${{ env.name }}/package.nw/node_modules/nodegit" nodegit
+          sudo cp -r "${{ env.name }}/compiler" compiler
      env:
        name: 'release-${{ github.ref_name }}'

--- a/compiler/wcc_node/index.js
+++ b/compiler/wcc_node/index.js
@ -0,0 +1,96 @@
+const util = require('./util')
+const path = require('path')
+
+let wcc
+try {
+  console.warn('wcc load')
+  wcc = require('./src/wcc')
+} catch (err) {
+  console.error('wcc', err)
+  // wcc = require('./build/Release/wcc.node')
+}
+
+const fs = util.fs
+
+exports = async function (options) {
+  // console.warn('wcc init options:', options);
+  if (!options) throw Error('options is required')
+
+  const lazyload = !!options.lazyloadConfig
+
+  options = Object.assign(
+    {
+      files: [],  // FILES
+      contents: [],
+      replaceContent: {},
+      verbose: false,
+      debug: false,   // -d
+      debugWXS: false,   // -ds
+      showNewTree: false,
+      isPlugin: false,
+      addTestAttre: false,
+      independent: false,
+      genfuncname: '$gwx',   // -gn
+      isCut: false,         // --split
+      cwd: process.cwd,
+      debug: false,
+      lazyload,               // -ll
+      lazyloadConfig: '',
+    },
+    options,
+  )
+
+  return new Promise(async (resolve, reject) => {
+    let st = Date.now()
+
+    // 获取文件内容
+    if (!options.contents.length) {
+      const tasks = options.files.map((file) => {
+        if (typeof options.replaceContent[file] === 'string') {
+          return options.replaceContent[file]
+        }
+        return fs.readFile(path.resolve(options.cwd, file), 'utf8')
+      })
+      options.contents = await Promise.all(tasks) || []
+    }
+    // console.warn('wcc get files', Date.now() - st, options.contents)
+    let result
+    try {
+      // console.warn('final options:', options);
+      // TODO: fix
+      result = wcc(options.cwd, options.files, {cut: options.isCut}, options)
+      // console.warn('wcc result', result)
+    } catch(errmsg) {
+      reject(new Error(errmsg))
+      return
+    }
+
+    // console.log('wcc get compile', Date.now() - st)
+    if (options.output) {
+      const output = path.resolve(options.cwd, options.output)
+      const dir = path.dirname(output)
+      if (lazyload) {
+        // lazyload 为 true时，wcc 返回值是个对象, 需要序列化一下
+        result = JSON.stringify(result)
+      }
+      try {
+        await fs.stat(dir)
+      } catch (e) {
+        await fs.mkdir(dir, {
+          recursive: true,
+        })
+      }
+      await fs.writeFile(output, result, 'utf8')
+    }
+    console.warn('wcc get output', Date.now() - st)
+    resolve(result)
+  })
+}
+
+Object.defineProperty(exports, 'version', {
+  get() {
+    return wcc.version
+  },
+})
+
+module.exports = exports
--- a/compiler/wcc_node/package.json
+++ b/compiler/wcc_node/package.json
@ -0,0 +1,25 @@
+{
+  "name": "miniprogram-wcc",
+  "version": "0.0.1",
+  "description": "WCC node C++ addon",
+  "main": "index.js",
+  "scripts": {
+    "install": "node-gyp-build",
+    "rebuild": "node-gyp rebuild",
+    "build:dist": "node scripts/build",
+    "build": "node-gyp build",
+    "test": "node ./test/index",
+    "format": "prettier *.js test/*.js scripts/*.js --write"
+  },
+  "author": "coverguo",
+  "license": "MIT",
+  "dependencies": {
+    "node-gyp-build": "^4.2.1"
+  },
+  "devDependencies": {
+    "eustia-module": "^1.21.2",
+    "licia": "^1.21.2",
+    "ncp": "^2.0.0",
+    "node-gyp": "^7.0.0"
+  }
+}
--- a/compiler/wcc_node/src/index.js
+++ b/compiler/wcc_node/src/index.js
@ -0,0 +1,30 @@
+const path = require('path')
+const vm = require('vm')
+const glob = require('glob')
+const unescapeJs = require('unescape-js')
+
+const wcc = require('./wcc')
+
+module.exports = {
+  wxmlToJs(rootPath) {
+    // wcc 编译器需要完整的 wxml 文件列表
+    const files = glob.sync('**/*.wxml', {
+      cwd: rootPath,
+      nodir: true,
+      dot: true,
+      ignore: ['node_modules/**/*.wxml'],
+    })
+    const wxsFiles = glob.sync('**/*.wxs', {
+      cwd: rootPath,
+      nodir: true,
+      dot: true,
+      ignore: ['node_modules/**/*.wxs'],
+    })
+    const compileResult = wcc(rootPath, files.map(file => file.substring(0, file.length - 5)), wxsFiles)
+
+    return `
+      ${compileResult};
+      return $gwx;
+    `
+  },
+}
--- a/compiler/wcc_node/src/wcc.js
+++ b/compiler/wcc_node/src/wcc.js
@ -0,0 +1,129 @@
+const { spawnSync } = require('child_process')
+const fs = require('fs')
+const path = require('path')
+
+/**
+ * 获取 wxml 编译器路径
+ */
+let wxmlParserPath = ''
+function getWXMLParsePath() {
+  if (wxmlParserPath) return wxmlParserPath
+
+  const fileName = process.platform === 'darwin' ? '../bin/mac/wcc' : process.platform === 'linux' ? '../bin/linux/wcc' : '../bin/windows/wcc.exe'
+  wxmlParserPath = path.join(__dirname, fileName)
+
+  // 尝试修改权限
+  try {
+    fs.chmodSync(wxmlParserPath, 0o777)
+  } catch (err) {
+    // ignore
+  }
+
+  return wxmlParserPath
+}
+
+/**
+ * 获取自定义组件编译参数
+ */
+function getComponentArgs(files) {
+  let args = []
+  let count = 0
+
+  files.forEach(file => {
+    const fileJson = file.fileJson
+
+    if (fileJson.usingComponents) {
+      args.push(file.pagePath)
+      args.push(Object.keys(fileJson.usingComponents).length)
+      args = args.concat(Object.keys(fileJson.usingComponents))
+      count++
+    }
+  })
+  args.unshift(count)
+
+  return args
+}
+
+/**
+ * 获取完整文件列表，包括自定义组件
+ */
+function getAllFiles(rootPath, files) {
+  const ret = []
+  const hasCheckMap = {}
+
+  for (let i = 0, len = files.length; i < len; i++) {
+    const file = files[i]
+
+    let fileJson = {}
+    const realPath = path.join(rootPath, file)
+    if (hasCheckMap[realPath]) continue
+    hasCheckMap[realPath] = true
+    try {
+      fileJson = require(`${realPath}.json`)
+    } catch(err) {
+      // ignore
+    }
+
+    // 自定义组件
+    if (fileJson.usingComponents) {
+      Object.keys(fileJson.usingComponents).forEach(subFileKey => {
+        const subFile = fileJson.usingComponents[subFileKey]
+
+        len++
+
+        let relativePath = path.relative(rootPath, path.join(path.dirname(realPath), subFile))
+        relativePath = relativePath.replace(/\\/g, '/')
+        files.push(relativePath)
+      })
+    }
+
+    ret.push({
+      pagePath: `${file}.wxml`,
+      jsonPath: `${file}.json`,
+      fileJson,
+    })
+  }
+
+  return ret
+}
+
+/**
+ * 入口
+ * 编译 wxml 到 js
+ *  files
+ * 
+ * @param {*} rootPath 
+ * @param {*} files 文件列表，包含组件
+ * @param {*} param2 
+ * @param {*} options 配置选项
+ * @returns 
+ */
+function wxmlToJS(rootPath, files, { cut } = {}, options={}) {
+  const type = cut ? '-xc' : '-cc'
+  // files = getAllFiles(rootPath, files)
+
+  // @TODO，如果遇到参数过长被操作系统干掉的情况，可以使用 --config-path FILE 配置，参数空格换成空行
+  // const componentArgs = getComponentArgs(files), componentArgs.join(' ')
+  const args = ['-d', '--split', options.wxmlCompileConfigSplit, type, options.wxmlCompileConfig]
+    .concat(files)
+    .concat(['-gn', '$gwx'])
+
+  // TODO:可用性检测
+  // wxs调试
+  if(options.debugWXS)args.unshift('-ds')
+  // 懒加载
+  if(options.lazyload)args=args.concat(['-ll', options.lazyloadConfig])
+
+  // wxmlParserPath 二进制可执行文件路径
+  const wxmlParserPath = getWXMLParsePath()
+  // console.warn('wcc args:', args)
+  const wcc = spawnSync(wxmlParserPath, args, { cwd: rootPath })
+
+  if (wcc.status === 0) {
+    return wcc.stdout.toString()
+  } else {
+    throw new Error(`编译 .wxml 文件错误：${wcc.stderr.toString()}`) 
+  }
+}
+
+module.exports = wxmlToJS
--- a/compiler/wcc_node/util.js
+++ b/compiler/wcc_node/util.js
--- a/compiler/wcsc_node/index.js
+++ b/compiler/wcsc_node/index.js
@ -0,0 +1,91 @@
+const util = require('./util')
+const path = require('path')
+const fs = util.fs
+
+// TODO:未找到触发操作，所以相关功能未验证
+let wcsc
+try {
+  wcsc = require('./src/wcsc')
+} catch (err) {
+  console.error('wcsc', err)
+  // wcsc = require('./build/Release/wcsc.node')
+}
+
+function tranWcscResultToObject(resultStr) {
+  const resultArr = resultStr.split('=')
+  const result = {}
+  for (let i = 0, len = resultArr.length; i < len && resultArr[i + 1]; i += 2) {
+    result[resultArr[i]] = resultArr[i + 1]
+  }
+  return result
+}
+
+exports = async function (options) {
+  if (!options) throw Error('options is required')
+
+  // avoid undefined or null
+  if (typeof options.subPackage !== 'string') {
+    delete options.subPackage
+  }
+
+  if (typeof options.lazyload !== 'boolean') {
+    delete options.lazyload
+  }
+
+  options = Object.assign(
+    {
+      files: [],
+      contents: [],
+      pageCount: 0,
+      cwd: process.cwd,
+      replaceContent: {},
+      debug: false,
+      classPrefix: '',
+      lazyload: false,
+    },
+    options,
+  )
+
+  if (!options.contents.length) {
+    const tasks = options.files.map((file) => {
+      if (typeof options.replaceContent[file] === 'string') {
+        return options.replaceContent[file]
+      }
+      return fs.readFile(path.resolve(options.cwd, file), 'utf8')
+    })
+    options.contents = await Promise.all(tasks) || []
+  }
+
+  let wccResult
+  try {
+    console.warn('wcsc options', options)
+    wccResult = wcsc(options.cwd, options.files, options)
+  } catch (errmsg) {
+    throw new Error(errmsg)
+  }
+
+  const result = options.lazyload ? wccResult : tranWcscResultToObject(wccResult)
+
+  if (options.output) {
+    const output = path.resolve(options.cwd, options.output)
+    const dir = path.dirname(output)
+    try {
+      await fs.stat(dir)
+    } catch (e) {
+      await fs.mkdir(dir, {
+        recursive: true,
+      })
+    }
+    await fs.writeFile(output, JSON.stringify(result, null, 2), 'utf8')
+  }
+
+  return result
+}
+
+Object.defineProperty(exports, 'version', {
+  get() {
+    return wcsc.version
+  },
+})
+
+module.exports = exports
--- a/compiler/wcsc_node/package.json
+++ b/compiler/wcsc_node/package.json
@ -0,0 +1,30 @@
+{
+  "name": "miniprogram-wcsc",
+  "version": "0.0.2",
+  "description": "WXSS node C++ addon",
+  "main": "index.js",
+  "scripts": {
+    "install": "node-gyp-build",
+    "rebuild": "node-gyp rebuild",
+    "build:dist": "node scripts/build",
+    "build": "node-gyp build",
+    "test": "node ./test/index",
+    "format": "prettier *.js test/*.js scripts/*.js --write"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@git.code.oa.com:redhoodsu/wxss.git"
+  },
+  "author": "redhoodsu",
+  "license": "MIT",
+  "dependencies": {
+    "node-gyp-build": "^4.2.1"
+  },
+  "devDependencies": {
+    "eustia-module": "^1.21.2",
+    "licia": "^1.21.2",
+    "ncp": "^2.0.0",
+    "node-gyp": "^7.0.0",
+    "prettier": "^2.3.1"
+  }
+}
--- a/compiler/wcsc_node/src/index.js
+++ b/compiler/wcsc_node/src/index.js
@ -0,0 +1,58 @@
+const path = require('path')
+const vm = require('vm')
+const glob = require('glob')
+const unescapeJs = require('unescape-js')
+
+const wcc = require('./wcc')
+const wcsc = require('./wcsc')
+
+module.exports = {
+  wxmlToJs(rootPath) {
+    // wcc 编译器需要完整的 wxml 文件列表
+    const files = glob.sync('**/*.wxml', {
+      cwd: rootPath,
+      nodir: true,
+      dot: true,
+      ignore: ['node_modules/**/*.wxml'],
+    })
+    const wxsFiles = glob.sync('**/*.wxs', {
+      cwd: rootPath,
+      nodir: true,
+      dot: true,
+      ignore: ['node_modules/**/*.wxs'],
+    })
+    const compileResult = wcc(rootPath, files.map(file => file.substr(0, file.length - 5)), wxsFiles)
+
+    return `
+      ${compileResult};
+      return $gwx;
+    `
+  },
+
+  wxssToJs(rootPath) {
+    // wcsc 编译器需要完整的 wxss 文件列表
+    const files = glob.sync('**/*.wxss', {
+      cwd: rootPath,
+      nodir: true,
+      dot: true,
+      ignore: ['node_modules/**/*.wxss'],
+    })
+    const compileResult = wcsc(rootPath, files.map(file => file.substr(0, file.length - 5)))
+
+    // 拼装 wxss map 字符串
+    let wxssMap = ''
+    Object.keys(compileResult).forEach(key => {
+      if (path.extname(key) === '.wxss') {
+        wxssMap += `'${key}': ${unescapeJs(compileResult[key])},`
+      }
+    })
+
+    return `
+      ${unescapeJs(compileResult.comm)};
+      var wxssMap = { ${wxssMap} };
+      return function (filePath) {
+        return wxssMap[filePath];
+      };
+    `
+  },
+}
--- a/compiler/wcsc_node/src/wcsc.js
+++ b/compiler/wcsc_node/src/wcsc.js
@ -0,0 +1,81 @@
+const { spawnSync } = require('child_process')
+const fs = require('fs')
+const path = require('path')
+
+/**
+ * 获取 wxss 编译器路径
+ */
+let wxssParserPath = ''
+function getWXSSParsePath() {
+  if (wxssParserPath) return wxssParserPath
+
+  const fileName = process.platform === 'darwin' ? '../bin/mac/wcsc' : process.platform === 'linux' ? '../bin/linux/wcsc' : '../bin/windows/wcsc.exe'
+  wxssParserPath = path.join(__dirname, fileName)
+
+  // 尝试修改权限
+  try {
+    fs.chmodSync(wxssParserPath, 0o777)
+  } catch (err) {
+    // ignore
+  }
+
+  return wxssParserPath
+}
+
+/**
+ * 获取完整文件列表
+ */
+function getAllFiles(rootPath, files) {
+  const ret = []
+  let compWxssNum = 0
+
+  for (let i = 0, len = files.length; i < len; i++) {
+    const file = files[i]
+
+    let fileJson = null
+    try {
+      fileJson = require(path.join(rootPath, `${file}.json`))
+    } catch(err) {
+      // ignore
+    }
+
+    if (fileJson) {
+      // 组件 wxss
+      compWxssNum++
+      ret.unshift(`${file}.wxss`)
+    } else {
+      ret.push(`${file}.wxss`)
+    }
+  }
+
+  return {
+    list: ret,
+    compWxssNum,
+  }
+}
+
+/**
+ * 编译 wxss 到 js
+ */
+function wxssToJS(rootPath, files, options) {
+  files = getAllFiles(rootPath, files)
+
+  const args = ['-db', '-pc', String(files.compWxssNum)].concat(files.list)
+
+  const wxssParserPath = getWXSSParsePath()
+  console.warn('wcsc args: ', args)
+  const wcsc = spawnSync(wxssParserPath, args, { cwd: rootPath })
+
+  if (wcsc.status === 0) {
+    const res = wcsc.stdout.toString().split('=')
+    const funcList = {}
+    for (let i = 0, len = res.length; i < len && res[i + 1]; i += 2) {
+      funcList[res[i]] = res[i + 1]
+    }
+    return funcList
+  } else {
+    return new Error(`编译 .wxss 文件错误：${wcsc.stderr.toString()}`)
+  }
+}
+
+module.exports = wxssToJS
--- a/compiler/wcsc_node/util.js
+++ b/compiler/wcsc_node/util.js
--- a/docker/entrypoint
+++ b/docker/entrypoint
@ -70,7 +70,7 @@ node-gyp list
 # end test

 cd /workspace
-# rm -rf node nwjs package.nw
+rm -rf node nwjs package.nw
 # 
 # exec ./tools/rebuild-node-modules 0.53.1
 exec ./tools/setup-wechat-devtools-bash
--- a/docs/Version.MD
+++ b/docs/Version.MD
@ -74,4 +74,9 @@

 | nodegit | NODE_MODULE_VERSION |
 |---------|----------|
-| 0.27.0  | 64, 72, 83 |
+| 0.27.0  | 64, 72, 83 |
+
+|      | wechat-devtools | miniprogram-compiler |
+|------|-----------------|----------------------|
+| wcc  | v0.5vv_20200413_syb_scopedata  | v0.5vv_20200413_syb_scopedata |
+| wcsc | v0.4me_20190328_db  | v0.4me_20190328_db |
--- a/readme.md
+++ b/readme.md
@ -1,4 +1,4 @@
-[![Node.js CI](https://github.com/jiyeme/wechat-devtools-linux/actions/workflows/release.yml/badge.svg)](https://github.com/jiyeme/wechat-devtools-linux/actions/workflows/release.yml)
+[![Node.js CI](https://github.com/msojocs/wechat-devtools-linux/actions/workflows/release.yml/badge.svg)](https://github.com/msojocs/wechat-devtools-linux/actions/workflows/release.yml)
 [![wechat-tools](https://img.shields.io/badge/wechat--devtools-1.05.2201240-yellow)](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
 [![nwjs](https://img.shields.io/badge/nwjs-0.53.1-green)](https://nwjs.io/downloads/)
 [![node](https://img.shields.io/badge/node-16.1.0-orange)](https://nodejs.org/en/)
@ -9,7 +9,7 @@
 本项目修改自：https://github.com/dragonation/wechat-devtools/

 # 项目地址
-* https://github.com/jiyeme/wechat-devtools
+* https://github.com/msojocs/wechat-devtools

 # 进度

@ -18,7 +18,7 @@

 # 使用方法

-可以在本项目的[发布](https://github.com/jiyeme/wechat-devtools/releases)中，寻找已经构筑好了的`.tar.gz`包（发布里也有度盘链接），下载解压后，运行其中的`bin/wechat-devtools`即可运行。
+可以在本项目的[发布](https://github.com/msojocs/wechat-devtools/releases)中，寻找已经构筑好了的`.tar.gz`包（发布里也有度盘链接），下载解压后，运行其中的`bin/wechat-devtools`即可运行。

 注：gitee上原来我也想放发布包的，但是文件太大了，附件最大只允许100M，而且总体积不能超过1G。所以目前暂时先只放github，如果大家发现下载速度慢的话，可以考虑科学上网或者度盘链接，速度快也稳定上传和下载。

@ -54,7 +54,7 @@ Docker容器启动方法
 2. 请安装`docker` `docker-compose`
 3. 克隆本项目：
 ```
-git clone https://github.com/jiyeme/wechat-devtools.git
+git clone https://github.com/msojocs/wechat-devtools.git
 ```
 4. 在本地项目目录中执行如下的语句，构筑开发者工具：
 ```
@ -75,7 +75,7 @@ docker-compose up
 2. 请安装nodejs，并配置到PATH环境变量中;
 3. 克隆本项目：
 ```
-git clone https://github.com/jiyeme/wechat-devtools.git
+git clone https://github.com/msojocs/wechat-devtools.git
 ```
 4. 在本地项目目录中执行如下的语句，构筑开发者工具：
 ```
@ -95,7 +95,7 @@ git clone https://github.com/jiyeme/wechat-devtools.git
 并配置到PATH环境变量中;
 3. 克隆本项目：
 ```
-git clone https://github.com/jiyeme/wechat-devtools.git
+git clone https://github.com/msojocs/wechat-devtools.git
 ```
 4. 在本地项目目录中执行如下的语句，构筑开发者工具：
 ```
@ -123,7 +123,7 @@ git clone https://github.com/jiyeme/wechat-devtools.git
 # 后续计划

 1. 增加Docker镜像的稳定性（对Host要求比较高）
-2. [处理计划](https://github.com/jiyeme/wechat-devtools/projects?type=beta)
+2. [处理计划](https://github.com/msojocs/wechat-devtools/projects?type=beta)

 # FAQ
 [GO](docs/FAQ.MD)
--- a/test/fix-wcc-node
+++ b/test/fix-wcc-node
@ -0,0 +1,9 @@
+#!/bin/bash
+package_dir="/mnt/disk1/GitHub/wechat-devtools/package.nw"
+cd "${package_dir}/node_modules/" \
+&& rm -rf wcc wcsc \
+&& mkdir -p "wcc/bin/linux" "wcsc/bin/linux" \
+&& cp -r "${package_dir}/node_modules_tmp/node_modules/miniprogram-compiler/bin/linux/wcc" "wcc/bin/linux/wcc" \
+&& cp -r "${package_dir}/node_modules_tmp/node_modules/miniprogram-compiler/bin/linux/wcsc" "wcsc/bin/linux/wcsc" \
+&& cp -r "${package_dir}/../compiler/wcc_node"/* "wcc" \
+&& cp -r "${package_dir}/../compiler/wcsc_node"/* "wcsc"
--- a/test/wcc/1/options.json
+++ b/test/wcc/1/options.json
@ -0,0 +1,26 @@
+{
+  "files": [
+    "./pages/index/index.wxml",
+    "./pages/logs/logs.wxml"
+  ],
+  "contents": [
+    "<!--index.wxml-->\n<view class=\"container\" data-ib-structured-id=\"0\">\n  <view class=\"userinfo\" data-ib-structured-id=\"1\">\n    <block wx:if=\"{{canIUseOpenData}}\" data-ib-structured-id=\"2\">\n      <view class=\"userinfo-avatar\" bindtap=\"bindViewTap\" style=\"width: 183rpx; height: 148rpx; display: block; box-sizing: border-box\" data-ib-structured-id=\"3\">\n        <open-data type=\"userAvatarUrl\" data-ib-structured-id=\"4\"></open-data>\n      </view>\n      <open-data type=\"userNickName\" data-ib-structured-id=\"5\"></open-data>\n    </block>\n    <block wx:elif=\"{{!hasUserInfo}}\" data-ib-structured-id=\"6\">\n      <button wx:if=\"{{canIUseGetUserProfile}}\" bindtap=\"getUserProfile\" data-ib-structured-id=\"7\"> 获取头像昵称 </button>\n      <button wx:elif=\"{{canIUse}}\" open-type=\"getUserInfo\" bindgetuserinfo=\"getUserInfo\" data-ib-structured-id=\"8\"> 获取头像昵称 </button>\n      <view wx:else data-ib-structured-id=\"9\"> 请使用1.4.4及以上版本基础库 </view>\n    </block>\n    <block wx:else data-ib-structured-id=\"10\">\n      <image bindtap=\"bindViewTap\" class=\"userinfo-avatar\" src=\"{{userInfo.avatarUrl}}\" mode=\"cover\" data-ib-structured-id=\"11\"></image>\n      <text class=\"userinfo-nickname\" data-ib-structured-id=\"12\">{{userInfo.nickName}}</text>\n    </block>\n  </view>\n  <view class=\"usermotto\" data-ib-structured-id=\"13\">\n    <text class=\"user-motto\" data-ib-structured-id=\"14\">{{motto}}</text>\n  </view>\n</view>\n",
+    "<!--logs.wxml-->\n<view class=\"container log-list\">\n  <block wx:for=\"{{logs}}\" wx:key=\"timeStamp\" wx:for-item=\"log\">\n    <text class=\"log-item\">{{index + 1}}. {{log.date}}</text>\n  </block>\n</view>\n"
+  ],
+  "replaceContent": {
+    "./pages/index/index.wxml": "<!--index.wxml-->\n<view class=\"container\" data-ib-structured-id=\"0\">\n  <view class=\"userinfo\" data-ib-structured-id=\"1\">\n    <block wx:if=\"{{canIUseOpenData}}\" data-ib-structured-id=\"2\">\n      <view class=\"userinfo-avatar\" bindtap=\"bindViewTap\" style=\"width: 183rpx; height: 148rpx; display: block; box-sizing: border-box\" data-ib-structured-id=\"3\">\n        <open-data type=\"userAvatarUrl\" data-ib-structured-id=\"4\"></open-data>\n      </view>\n      <open-data type=\"userNickName\" data-ib-structured-id=\"5\"></open-data>\n    </block>\n    <block wx:elif=\"{{!hasUserInfo}}\" data-ib-structured-id=\"6\">\n      <button wx:if=\"{{canIUseGetUserProfile}}\" bindtap=\"getUserProfile\" data-ib-structured-id=\"7\"> 获取头像昵称 </button>\n      <button wx:elif=\"{{canIUse}}\" open-type=\"getUserInfo\" bindgetuserinfo=\"getUserInfo\" data-ib-structured-id=\"8\"> 获取头像昵称 </button>\n      <view wx:else data-ib-structured-id=\"9\"> 请使用1.4.4及以上版本基础库 </view>\n    </block>\n    <block wx:else data-ib-structured-id=\"10\">\n      <image bindtap=\"bindViewTap\" class=\"userinfo-avatar\" src=\"{{userInfo.avatarUrl}}\" mode=\"cover\" data-ib-structured-id=\"11\"></image>\n      <text class=\"userinfo-nickname\" data-ib-structured-id=\"12\">{{userInfo.nickName}}</text>\n    </block>\n  </view>\n  <view class=\"usermotto\" data-ib-structured-id=\"13\">\n    <text class=\"user-motto\" data-ib-structured-id=\"14\">{{motto}}</text>\n  </view>\n</view>\n"
+  },
+  "verbose": false,
+  "debug": true,
+  "debugWXS": false,
+  "showNewTree": false,
+  "addTestAttre": false,
+  "independent": false,
+  "genfuncname": "$gwx",
+  "isCut": false,
+  "cwd": "C:/users/msojocs/Documents/we1",
+  "lazyload": false,
+  "lazyloadConfig": "",
+  "wxmlCompileConfig": "2>_<4679./pages/index/index.wxml>_<46790>_<4679./pages/logs/logs.wxml>_<46790",
+  "wxmlCompileConfigSplit": ">_<4679"
+}
--- a/test/wcc/1/result-bin.js
+++ b/test/wcc/1/result-bin.js
--- a/test/wcc/1/result-node.js
+++ b/test/wcc/1/result-node.js
--- a/test/wcc/2/options.json
+++ b/test/wcc/2/options.json
@ -0,0 +1,25 @@
+{
+  "files": [
+    "./pages/index/index.wxml",
+    "./pages/logs/logs.wxml"
+  ],
+  "contents": [
+    "<!--index.wxml-->\n<view class=\"container\" data-ib-structured-id=\"0\">\n  <view class=\"userinfo\" data-ib-structured-id=\"1\">\n    <block wx:if=\"{{canIUseOpenData}}\" data-ib-structured-id=\"2\">\n      <view class=\"userinfo-avatar\" bindtap=\"bindViewTap\" style=\"width: 183rpx; height: 148rpx; display: block; box-sizing: border-box\" data-ib-structured-id=\"3\">\n        <open-data type=\"userAvatarUrl\" data-ib-structured-id=\"4\"></open-data>\n      </view>\n      <open-data type=\"userNickName\" data-ib-structured-id=\"5\"></open-data>\n    </block>\n    <block wx:elif=\"{{!hasUserInfo}}\" data-ib-structured-id=\"6\">\n      <button wx:if=\"{{canIUseGetUserProfile}}\" bindtap=\"getUserProfile\" data-ib-structured-id=\"7\"> 获取头像昵称 </button>\n      <button wx:elif=\"{{canIUse}}\" open-type=\"getUserInfo\" bindgetuserinfo=\"getUserInfo\" data-ib-structured-id=\"8\"> 获取头像昵称 </button>\n      <view wx:else data-ib-structured-id=\"9\"> 请使用1.4.4及以上版本基础库 </view>\n    </block>\n    <block wx:else data-ib-structured-id=\"10\">\n      <image bindtap=\"bindViewTap\" class=\"userinfo-avatar\" src=\"{{userInfo.avatarUrl}}\" mode=\"cover\" data-ib-structured-id=\"11\"></image>\n      <text class=\"userinfo-nickname\" data-ib-structured-id=\"12\">{{userInfo.nickName}}</text>\n    </block>\n  </view>\n  <view class=\"usermotto\" data-ib-structured-id=\"13\">\n    <text class=\"user-motto\" data-ib-structured-id=\"14\">{{motto}}</text>\n  </view>\n</view>\n",
+    "<!--logs.wxml-->\n<view class=\"container log-list\">\n  <block wx:for=\"{{logs}}\" wx:key=\"timeStamp\" wx:for-item=\"log\">\n    <text class=\"log-item\">{{index + 1}}. {{log.date}}</text>\n  </block>\n</view>\n"
+  ],
+  "replaceContent": {
+    "./pages/index/index.wxml": "<!--index.wxml-->\n<view class=\"container\" data-ib-structured-id=\"0\">\n  <view class=\"userinfo\" data-ib-structured-id=\"1\">\n    <block wx:if=\"{{canIUseOpenData}}\" data-ib-structured-id=\"2\">\n      <view class=\"userinfo-avatar\" bindtap=\"bindViewTap\" style=\"width: 183rpx; height: 148rpx; display: block; box-sizing: border-box\" data-ib-structured-id=\"3\">\n        <open-data type=\"userAvatarUrl\" data-ib-structured-id=\"4\"></open-data>\n      </view>\n      <open-data type=\"userNickName\" data-ib-structured-id=\"5\"></open-data>\n    </block>\n    <block wx:elif=\"{{!hasUserInfo}}\" data-ib-structured-id=\"6\">\n      <button wx:if=\"{{canIUseGetUserProfile}}\" bindtap=\"getUserProfile\" data-ib-structured-id=\"7\"> 获取头像昵称 </button>\n      <button wx:elif=\"{{canIUse}}\" open-type=\"getUserInfo\" bindgetuserinfo=\"getUserInfo\" data-ib-structured-id=\"8\"> 获取头像昵称 </button>\n      <view wx:else data-ib-structured-id=\"9\"> 请使用1.4.4及以上版本基础库 </view>\n    </block>\n    <block wx:else data-ib-structured-id=\"10\">\n      <image bindtap=\"bindViewTap\" class=\"userinfo-avatar\" src=\"{{userInfo.avatarUrl}}\" mode=\"cover\" data-ib-structured-id=\"11\"></image>\n      <text class=\"userinfo-nickname\" data-ib-structured-id=\"12\">{{userInfo.nickName}}</text>\n    </block>\n  </view>\n  <view class=\"usermotto\" data-ib-structured-id=\"13\">\n    <text class=\"user-motto\" data-ib-structured-id=\"14\">{{motto}}</text>\n  </view>\n</view>\n"
+  },
+  "verbose": false,
+  "debug": true,
+  "debugWXS": false,
+  "showNewTree": false,
+  "addTestAttre": false,
+  "independent": false,
+  "genfuncname": "$gwx",
+  "cwd": "C:/users/msojocs/Documents/we1",
+  "lazyload": false,
+  "lazyloadConfig": "",
+  "wxmlCompileConfig": "2>_<5795./pages/index/index.wxml>_<57950>_<5795./pages/logs/logs.wxml>_<57950",
+  "wxmlCompileConfigSplit": ">_<5795"
+}
--- a/test/wcc/2/result-node.js
+++ b/test/wcc/2/result-node.js
--- a/test/wcc/3/options.json
+++ b/test/wcc/3/options.json
@ -0,0 +1,26 @@
+{
+  "files": [
+    "./pages/index/index.wxml",
+    "./pages/logs/logs.wxml"
+  ],
+  "contents": [
+    "<!--index.wxml-->\n<view class=\"container\" data-ib-structured-id=\"0\">\n  <view class=\"userinfo\" data-ib-structured-id=\"1\">\n    <block wx:if=\"{{canIUseOpenData}}\" data-ib-structured-id=\"2\">\n      <view class=\"userinfo-avatar\" bindtap=\"bindViewTap\" style=\"width: 183rpx; height: 148rpx; display: block; box-sizing: border-box\" data-ib-structured-id=\"3\">\n        <open-data type=\"userAvatarUrl\" data-ib-structured-id=\"4\"></open-data>\n      </view>\n      <open-data type=\"userNickName\" data-ib-structured-id=\"5\"></open-data>\n    </block>\n    <block wx:elif=\"{{!hasUserInfo}}\" data-ib-structured-id=\"6\">\n      <button wx:if=\"{{canIUseGetUserProfile}}\" bindtap=\"getUserProfile\" data-ib-structured-id=\"7\"> 获取头像昵称 </button>\n      <button wx:elif=\"{{canIUse}}\" open-type=\"getUserInfo\" bindgetuserinfo=\"getUserInfo\" data-ib-structured-id=\"8\"> 获取头像昵称 </button>\n      <view wx:else data-ib-structured-id=\"9\"> 请使用1.4.4及以上版本基础库 </view>\n    </block>\n    <block wx:else data-ib-structured-id=\"10\">\n      <image bindtap=\"bindViewTap\" class=\"userinfo-avatar\" src=\"{{userInfo.avatarUrl}}\" mode=\"cover\" data-ib-structured-id=\"11\"></image>\n      <text class=\"userinfo-nickname\" data-ib-structured-id=\"12\">{{userInfo.nickName}}</text>\n    </block>\n  </view>\n  <view class=\"usermotto\" data-ib-structured-id=\"13\">\n    <text class=\"user-motto\" data-ib-structured-id=\"14\">{{motto}}</text>\n  </view>\n</view>\n",
+    "<!--logs.wxml-->\n<view class=\"container log-list\">\n  <block wx:for=\"{{logs}}\" wx:key=\"timeStamp\" wx:for-item=\"log\">\n    <text class=\"log-item\">{{index + 1}}. {{log.date}}</text>\n  </block>\n</view>\n"
+  ],
+  "replaceContent": {
+    "./pages/index/index.wxml": "<!--index.wxml-->\n<view class=\"container\" data-ib-structured-id=\"0\">\n  <view class=\"userinfo\" data-ib-structured-id=\"1\">\n    <block wx:if=\"{{canIUseOpenData}}\" data-ib-structured-id=\"2\">\n      <view class=\"userinfo-avatar\" bindtap=\"bindViewTap\" style=\"width: 183rpx; height: 148rpx; display: block; box-sizing: border-box\" data-ib-structured-id=\"3\">\n        <open-data type=\"userAvatarUrl\" data-ib-structured-id=\"4\"></open-data>\n      </view>\n      <open-data type=\"userNickName\" data-ib-structured-id=\"5\"></open-data>\n    </block>\n    <block wx:elif=\"{{!hasUserInfo}}\" data-ib-structured-id=\"6\">\n      <button wx:if=\"{{canIUseGetUserProfile}}\" bindtap=\"getUserProfile\" data-ib-structured-id=\"7\"> 获取头像昵称 </button>\n      <button wx:elif=\"{{canIUse}}\" open-type=\"getUserInfo\" bindgetuserinfo=\"getUserInfo\" data-ib-structured-id=\"8\"> 获取头像昵称 </button>\n      <view wx:else data-ib-structured-id=\"9\"> 请使用1.4.4及以上版本基础库 </view>\n    </block>\n    <block wx:else data-ib-structured-id=\"10\">\n      <image bindtap=\"bindViewTap\" class=\"userinfo-avatar\" src=\"{{userInfo.avatarUrl}}\" mode=\"cover\" data-ib-structured-id=\"11\"></image>\n      <text class=\"userinfo-nickname\" data-ib-structured-id=\"12\">{{userInfo.nickName}}</text>\n    </block>\n  </view>\n  <view class=\"usermotto\" data-ib-structured-id=\"13\">\n    <text class=\"user-motto\" data-ib-structured-id=\"14\">{{motto}}</text>\n  </view>\n</view>\n"
+  },
+  "verbose": false,
+  "debug": true,
+  "debugWXS": false,
+  "showNewTree": false,
+  "addTestAttre": false,
+  "independent": false,
+  "genfuncname": "$gwx",
+  "isCut": false,
+  "cwd": "C:/users/msojocs/Documents/we1",
+  "lazyload": false,
+  "lazyloadConfig": "",
+  "wxmlCompileConfig": "2>_<3233./pages/index/index.wxml>_<32330>_<3233./pages/logs/logs.wxml>_<32330",
+  "wxmlCompileConfigSplit": ">_<3233"
+}
--- a/test/wcc/3/result-node.js
+++ b/test/wcc/3/result-node.js
--- a/test/wcc/4/options.json
+++ b/test/wcc/4/options.json
--- a/test/wcc/4/result-node.js
+++ b/test/wcc/4/result-node.js
--- a/test/wcc/WCC.MD
+++ b/test/wcc/WCC.MD
@ -0,0 +1,23 @@
+
+
+# 输入
+node_modules --- options.json
+把options.json转换为命令行参数
+
+execute ---- 
+```
+Wechat WXML Compiler, version v0.5vv_20200413_syb_scopedata
+Usage: ./wcc [-d] [-o OUTPUT] [-xc XComponentDefine] [-om XComponentDefine] [-cb [callback.js...]] [-ll XCPath] <FILES... | -s <SINGLE_FILE>
+  Options:
+  -d: output code for debug
+  -o: output destination (default stdout)
+ -xc: output simplified code for custom component
+ -cc: output compelete code for custom component
+  -s: read from stdin
+ -ds: insert debug wxs info
+ -cb: add life cycle callback
+ -ll: compile in lazy load mode
+```
+
+# 输出
+
--- a/test/wcc/common.js
+++ b/test/wcc/common.js
--- a/test/wcc/test.sh
+++ b/test/wcc/test.sh
@ -0,0 +1,9 @@
+#!/bin/bash
+cd /home/msojocs/Documents/we1 && \
+/mnt/disk1/GitHub/wechat-devtools/package.nw/node_modules/wcc/bin/linux/wcc -d --split ">_<9772" -cc "2>_<9772./pages/index/index.wxml>_<97720>_<9772./pages/logs/logs.wxml>_<97720" ./pages/index/index.wxml ./pages/logs/logs.wxml -gn $gwx
+# | grep Z
+
+# cd /home/msojocs/Documents/we1 && \
+# wine /mnt/disk1/GitHub/wechat-devtools/cache/wechat_devtools_1.05.2201240_x64/code/package.nw/js/vendor/wcc.exe \
+# " -d --split >_<9772 -xc 2>_<9772./pages/index/index.wxml>_<97720>_<9772./pages/logs/logs.wxml>_<97720" \
+# " ./pages/logs/logs.wxml ./pages/index/index.wxml -gn $gwx"
--- a/tools/fix-package-name-node
+++ b/tools/fix-package-name-node
@ -16,7 +16,7 @@ const parseFile = function (path) {
    // 开启调试，更新参数
    content['chromium-args'] = content['chromium-args'].replace('--disable-devtools', '').replace('--ignore-gpu-blacklist', '--ignore-gpu-blocklist') + '  --mixed-context'
    content.window.height = content.window.width = 500
-    fs.writeFileSync(path, JSON.stringify(content, null, 4));
+    fs.writeFileSync(path, JSON.stringify(content));

 };

--- a/tools/rebuild-node-modules
+++ b/tools/rebuild-node-modules
@ -101,9 +101,19 @@ mkdir -p "${package_dir}/node_modules/vscode-ripgrep/bin"
 cp -fr "${package_dir}/node_modules_tmp/node_modules/vscode-ripgrep/bin/rg" "${package_dir}/node_modules/vscode-ripgrep/bin/rg"

 # wcc wcsc
+# 预览编译
 cd "${package_dir}/js/vendor/" && rm -rf "wcc.exe" "wcsc.exe"
 cp "${package_dir}/node_modules_tmp/node_modules/miniprogram-compiler/bin/linux/wcc" "${package_dir}/js/vendor/wcc.exe"
 cp "${package_dir}/node_modules_tmp/node_modules/miniprogram-compiler/bin/linux/wcsc" "${package_dir}/js/vendor/wcsc.exe"
+# 可视化编译
+(cd "${package_dir}/node_modules/" \
+&& rm -rf wcc wcsc \
+&& mkdir -p "wcc/bin/linux" "wcsc/bin/linux" \
+&& cp -r "${package_dir}/node_modules_tmp/node_modules/miniprogram-compiler/bin/linux/wcc" "wcc/bin/linux/wcc" \
+&& cp -r "${package_dir}/node_modules_tmp/node_modules/miniprogram-compiler/bin/linux/wcsc" "wcsc/bin/linux/wcsc" \
+&& cp -r "${package_dir}/../compiler/wcc_node"/* "wcc" \
+&& cp -r "${package_dir}/../compiler/wcsc_node"/* "wcsc"
+)

 rm -rf "${package_dir}/node_modules_tmp"