配置文件

可以通过--config 指定配置文件,比如 --config a/b.config.js(这里a/b相对路径,是相对于-i指定的输入目录)。 如果没有手动指定配置文件, 将会默认在 -i指定的输入目录寻找alita.config.js。 如果还是没有,将会使用默认配置,默认配置如下

module.exports = { 
    isFileIgnore: (filepath) => false,
    subDir: '/',
    packageJSONPath: './package.json',
    dependenciesMap: { 
        'react': [ '@areslabs/wx-react', '^1.0.0' ],
        'react-native': [ '@areslabs/wx-react-native', '^1.0.0' ],
        'prop-types': [ '@areslabs/wx-prop-types', '^1.0.0' ],
        '@areslabs/router': ['@areslabs/wx-router'],
        'moment': [ '@areslabs/wx-moment', '^1.0.0' ],
        'redux': [ '@areslabs/wx-redux', '^1.0.0' ],
        'react-redux': [ '@areslabs/wx-react-redux', '^1.0.0' ],
        'redux-actions': [ '@areslabs/wx-redux-actions', '^1.0.0' ],
        'redux-promise': [ '@areslabs/wx-redux-promise', '^1.0.0' ],
        'redux-thunk': [ '@areslabs/wx-redux-thunk', '^1.0.0' ]
    },


    extCompLibs: [
        {
            name: 'react-native',
            compDir: 'component',
            compLists: [
                'View',
                'Image',
                ...
            ]
        }
    ]
}

字段说明

下面我们对每一个字段的含义分别说明

name

生成的小程序名字

appid

调试小程序的appid,通常由微信申请而来

isFileIgnore

函数,参数是文件路径,如果返回true,文件将会被忽略 注意 node_modules, .git, .expo等目录,转化引擎会直接忽略,即使这里没有设置

subDir

详见小程序分包[./小程序分包.md]

packageJSONPath

指定React Native的package.json 文件,如果是相对路径,相对于-i指定的输入目录,默认会在输入目录寻找

dependenciesMap

由于小程序的npm使用和React Native不同。 对于一个React Native包很有可能不能直接在微信小程序平台使用。对此, 我们一般有以下几种方式:

  1. npm包既可以在RN使用,也可以在小程序使用。一般是我自己的工具库,在发包的时候就兼顾了小程序平台,或者就有miniprogram_dist小程序目录
  2. RN和小程序分别为两个包, 比如redux, 由于不能修改redux, 所以我们会发一个小程序版本的wx-redux
  3. 一个包,但是使用npm tag的形式区分,安装的时候分tag安装
  4. 通过平台判断之后,包只会被RN使用

对于第一种情况,由于包本身可以在微信小程序平台使用,并不需要特别处理。 对于第二种两个npm包的情况, 需要在dependenciesMap 配置一项,以redux为例, 在小程序平台 有一个简化版的wx-redux,那么我们需要配置

module.exports = {
    dependenciesMap: {
        'redux': [ 'wx-redux', '^1.0.0' ],
    },
}

对于第三种分tag的情况, 假如有一个包'somepack', 在小程序平台的tag是wx, 那么配置如下:

module.exports = {
    dependenciesMap: {
        'somepack': [ 'somepack', 'wx' ],
    },
}

对于第四种情况, 由于转化为小程序只会这个包已经不会在使用,需要删除掉, 配置如下:

module.exports = {
    dependenciesMap: {
        'somepack': false //值为false 包将在小程序的package.json里被删除
    },
}

为了让大家更深刻的理解dependenciesMap配置项,我们以一个例子来看下它究竟是如何工作的。

我们假定React Native项目的package.json文件如下,这里只列出了dependencies字段,转化的时候只会处理dependencies字段,devDependencies, pureDependencies 等会被直接忽略。

package.json

{ 
  "dependencies": {
    "pack1": "^2.0.0",
    "pack2": "^2.0.0",
    "pack3": "^2.0.0",
    "pack4": "^2.0.0",
    "pack5": "^2.0.0"
  }
}

同时,我们假定有如下的配置文件:

alita.config.js

module.exports = {
    dependenciesMap: {
        'pack2': 'wx-pack2',
        'pack3': ['wx-pack3', '1.0.0'],
        'pack4': ['wx-pack4', 'wx'],
        'pack5': false
    },
}

转化引擎会遍历React Native的所有依赖项,pack1,pack2,pack3,pack4,pack5。 对于每一个依赖项, 会去 配置文件的dependenciesMap 寻求对应规则。

  1. 对于pack1,在dependenciesMap没有指定, 那默认pack1在小程序平台可以直接使用,不变即可。
  2. 对于pack2,在dependenciesMap中指定了在小程序中的包名,没有指定版本号,默认一样,所以在小程序平台对应的包为 "wx-pack2": "^2.0.0"
  3. 对于pack3/pack4 即指定了包名, 又指定了版本号。
  4. 对于pack5 由于值为false,所以我们知道这个包 不会在小程序使用,需要删除。

最后,生成的小程序项目package.json文件

{

  "dependencies": {
    "pack1": "^2.0.0",
    "wx-pack2": "^2.0.0",
    "wx-pack3": "1.0.0",
    "wx-pack4": "wx"
  }
}

注意一定不要把jest,babel等库放在dependencies,这些库应该是devDependencies

另外, 对于react, redux这些基本库,正如之前默认配置所示,这些包的映射规则内置在了转化引擎之中。

extCompLibs

这个字段用于扩展自定义组件,当你手动对齐了一个基本UI组件库之后,需要在这个字段进行配置。以官方已经对齐的React Native 基本组件为例

module.exports = { 
    ...
    extCompLibs: [
        {
            name: 'react-native',
            compDir: 'component',
            compLists: [
                'View',
                'Image',
                ...
            ]
        }
    ]
}

name字段指明了包名, compDir指明组件代码目录,可选。 compLists是个数组,列出所有对齐的组件

results matching ""

    No results matching ""