静态限制

这里所讲的静态限制，其根本原因是微信小程序有一些信息是配置在json文件的，而json文件是无法在运行时修改的，必须在编译阶段生成对应的文件，所以我们称其为静态限制。

入口文件

关于入口文件的限制，我们在入口文件 中已经做了详细说明。

组件导入路径

每一个微信小程序的自定义组件都有一个相应的 JSON 配置文件。

{
    "component": true,
    "usingComponents": {
        "XXX": "./components/xxx/index"
    },
    "componentGenerics": {}
}

这里的 usingComponents 字段定义了组件需要引用的其他组件。

考虑如下的 React Native 代码：

import XXX from './xxx'
import {YYY} from './yyy'
import z from './zzz'

const Z1 = z.Z1

class HelloWorld extends React.Component {
    render() {
        return (
            <View>
                <XXX/>
                <YYY/>
                <Z1/>
            </View>
        )  
    }
}

当我们使用 AST 静态分析这段代码的时候，如何生成微信小程序端的 usingComponents 呢？

首先根据 import 语句，可以先分析出如下结果：

{
    "usingComponents": {
        "XXX": "./xxx",
        "YYY": "./yyy"
    }
}

XXX, YYY 组件可以直接分析出其路径，那么Z1组件呢？Z1的组件路径仅仅在静态分析阶段是无法得知的，所以这里我们得出我们的第二个静态限制：

组件的引入，需要在 import/require 语句就直接写明，转化引擎需要静态分析出组件路径。

错误案例如下：

import A from 'A'
const B = requie('B')
const Ac = A.c
const Bd = B.d
const x = <Ac/>
const y = <Bd/>

正确使用：

import {A} from 'A'
import B from 'B'
const { C }  = require('C')
const D  = require('D')

const x = <A/>
const y = <B/>
const z = <C/>
const zz = <D/>

最后

这些静态限制受限于微信小程序，暂时没有有效的解决方案，希望开发者严格遵守以上要求和约定。