百度小程序转换工具

CV or Not CV, isn't a question, Just CV!

微信小程序与百度小程序的对比
https://smartprogram.baidu.co...
https://github.com/yican008/w...

一、Babel

解析 → 转换 → 生成

 //解析 → 转换 → 生成
 //babylon(解析)、babel-traverse(转换)、babel-generator(生成)、@babel/types(辅助)
 

解析(词法 → 语法)

//词法分析阶段把字符串形式的代码转换为tokens令牌流
{
    type:"paren",value:"(",
    type:"name",value:"foo",
    ...//tokens令牌
}
//语法分析阶段则会把一个令牌流转换成 AST的形式
// https://astexplorer.net/

demo

<div>
  {'#frontend'}
  {'#backend'}

  <Iyourcar id="frontend" />
  <Iyourcar id="backend" />
</div>

JSXExpressionContainer(path, state) {
    if (path.node.expression.value.startsWith("#")) {
      path.replaceWith(
        t.JSXOpeningElement(
          t.JSXIdentifier("Iyourcar"),
          [
            t.JSXAttribute(
              t.JSXIdentifier("id"),
              t.StringLiteral(
                path.node.expression.value.replace("#", "")
              )
            )
          ],
          true
        )
      );
    }
}

二、转换js

//先转换api、__router__、getExtConfigSync，再转wx前缀

三、转换wxml

// unified 一个流式的创建插入内容的工具。工作原理

| ........................ process ........................... |
| .......... parse ... | ... run ... | ... stringify ..........|

          +--------+                     +----------+
Input ->- | Parser | ->- Syntax Tree ->- | Compiler | ->- Output
          +--------+          |          +----------+
                              X
                              |
                       +--------------+
                       | Transformers |
                       +--------------+


// htmlparser2可以用来处理HTML / XML / RSS的解析器。
{ type: 'tag',
  name: Symbol(fake-root),
  attribs: {},
  children:
   [ { type: 'tag',
       name: 'yc-navbar',
       attribs: [Object],
       children: [],
       singleQuoteAttribs: {},
       selfclose: true },
     { data: '\n', type: 'text' },
     { data: ' loading ', type: 'comment' },
     { data: '\n', type: 'text' },
     { type: 'tag',
       name: 'loading',
       attribs: [Object],
       children: [],
       singleQuoteAttribs: {},
       selfclose: false },
    ]
}

四、转换wxs

//百度小程序对应的是filter与sjs。但是filter已弃用，sjs有bug

//对于wxml中的wxs
function tranformWxs(node, file, options){
  const attribs = node.attribs;
  node.name="import-sjs"
  if (attribs && attribs.src) {
      let src = attribs.src.replace(/\.wxs$/i, '.sjs');
      return {
          ...node,
          attribs: {
              ...attribs,
              src: src
          }
      };
  }
  return node;
}

//.wxs文件 → 重命名 .sjs

function renameFileExt(filePath) {
    if (/xml|wxml/.test(filePath)) {
        return filePath.replace(/xml|wxml$/, swanFileSuffix);
    }
    else if (/\.wxs/.test(filePath)) {
        return filePath.replace(/\.wxs$/, wxsFileSuffix);
    }
    else {
        return filePath;
    }
}

Thanks...