百度小程序轉換工具

時間 2020-01-11

標籤百度程序轉換工具简体版

原文原文鏈接

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

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

1、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
        )
      );
    }
}

2、轉換js

//先轉換api、__router__、getExtConfigSync，再轉wx前綴

3、轉換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 },
    ]
}

4、轉換wxs

//百度小程序對應的是filter與sjs。可是filter已棄用，sjs有bugnode

//對於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;
    }
}