Taro UI 不支持RN的窘境
Taro UI 文档上很早就说明会有可能支持rn了,但是快一年多了,因为taro ui团队人力的问题一直没有兼容到rn.
业务紧迫,我们等不到那一天了.自己动手丰衣足食.
Taro 传统组件打包在RN上的问题
一般来说,组件库打完包之后 dist/index.js文件会是这样的.
根据运行时的环境变量区分是否要引入哪一个组件库.
if (process.env.TARO_ENV === 'weapp') {
module.exports = require('./weapp/ui')
module.exports.default = module.exports
} else if (process.env.TARO_ENV === 'h5') {
module.exports = require('./h5/ui')
module.exports.default = module.exports
} else {
module.exports = require('./weapp/ui')
module.exports.default = module.exports
}
理想模式下,只要加入一个rn的环境判断,就可以做到rn组件库的引入了.
if (process.env.TARO_ENV === 'weapp') {
module.exports = require('./weapp/ui')
module.exports.default = module.exports
} else if (process.env.TARO_ENV === 'h5') {
module.exports = require('./h5/ui')
module.exports.default = module.exports
} else if (process.env.TARO_ENV === 'rn') {
// 理想模式,只需要加这一段
module.exports = require('./rn/ui')
module.exports.default = module.exports
} else {
module.exports = require('./weapp/ui')
module.exports.default = module.exports
}
可是现实不是这样的,rn如果引入组件库的索引文件,是dist/index.js,他会提前把所有端的代码全部预执行一遍.
代码还没有真正运行,就因为其他端的代码不兼容,直接报错了. 所以这样硬核的引入方法是不可行的.
rn组件库代码与其他端代码完全隔离
ui.js文件的改动
在src下边有一个ui.js文件,大致内容是这样的:
import Taro from '@tarojs/taro'
import './style/index.scss'
export { default as AActionSheet } from './components/action-sheet'
export { default as AActionSheetItem } from './components/action-sheet/body/item'
export { default as AText } from './components/text'
export { default as AToast } from './components/toast'
export { default as AButton } from './components/button'
// 其他组件...
为了更好的在原来组件库上做rn的兼容,利用taro可以根据文件后缀名区分端的特性就排上用场了.
需要新建一个ui.rn.js
内容与作用跟ui.js基本上一致,唯一的区别在于, from 的路径,有的组件后面页需要加上rn后缀.
import Taro from '@tarojs/taro'
import './style/index.scss'
export { default as AActionSheet } from './components/action-sheet/index.rn'
export { default as AActionSheetItem } from './components/action-sheet/body/item/index.rn'
export { default as AText } from './components/text'
export { default as AToast } from './components/toast/index.rn' // 针对rn兼容的组件
export { default as AButton } from './components/button/index' // 各端都兼容的组件
组件库索引文件的改动
普通情况下,rn打包完之后会生成一个 rn_temp文件夹,这里面就是纯粹的rn代码.
这里面的代码完全不用像其他端一样生成到dist目录.
我的组件库索引文件,也就是packages.json里面的main指向一个rn组件库专属的索引文件就可以了.
我这里命名为: main.rn.js
rn的组件库索引文件:
"use strict";
module.exports = require('./rn_temp/ui.rn.js');
module.exports.default = module.exports
其他端的话就指向dist目录就好了
h5与各种小程序端
"use strict";
module.exports = require('./dist/index');
module.exports.default = module.exports
组件库打包与发布
小程序与h5端的组件库还是按照原来的打包与发布模式.
但是rn端的话,需要在发布的时候修改一下package.json内容.
我这里提供一个简单的发布脚本:
const { execSync } = require('child_process');
const fse = require('fs-extra');
const path = require('path');
// 升级一下版本号
execSync("npm version patch");
const pkgPath = path.relative(process.cwd(),'package.json')
var packageData = fse.readJsonSync(pkgPath);
// h5 小程序组件库
console.log("开始构建小程序组件库")
packageData.name = 'taro-ui'
packageData.main = 'main.js'
fse.outputJsonSync(pkgPath, packageData,{spaces:2});
execSync(`npm run build:component && crgt publish;`);
// 修改一下npm包名,重新发布一个包
console.log("开始构建rn组件库")
packageData.name = 'taro-ui-rn'
packageData.main = 'rn_temp/ui.rn.js'
fse.outputJsonSync(pkgPath, packageData,{spaces:2});
execSync('npm run build:rn && crgt publish;');
// 还原名字
packageData.name = 'taro-ui'
packageData.main = 'main.js'
fse.outputJsonSync(pkgPath, packageData,{spaces:2});
execSync('git push');
在这里你应该发现了,我发布组件库的时候,是发布两个npm包.
作为强迫症的你,不要太在意这些. 因为taro很多的依赖也是这样干的.
如何使用这样的组件库
在业务开发的时候,代码只要直接引入 taro-ui这个npm包就好了,
但是如果是rn业务该怎么办呢?
这里我们借鉴taro处理官方依赖的方式,在代码编译时将 taro-ui 替换包名 taro-ui-rn就可以了.
所以我们需要简单的修改一下taro的源码. 我们用的1.3.X版本,如果是更高的版本,应该可以有其他方式修改.
在1.3.x的版本中,我们需要修改tarojs/cli的代码.
在cli中的rn模块有一个 transformJS文件, 在这个文件搜索一下 source.value = PACKAGES['@tarojs/components-rn'],找到这行代码的位置.
这段代码的意思大概就是,在遍历ast的时候,如果引入的包名为@tarojs/components将其替换成为 @tarojs/components-rn.
所以我们按照一样的逻辑,多加一行else if
else if (value === PACKAGES['@tarojs/components']) {
source.value = PACKAGES['@tarojs/components-rn']
// 加上下一段判断
}else if (value === 'taro-ui') {
source.value = 'taro-ui-rn'
}
这样,我们就可以正常开发的情况下引入正确的npm包了.