通过 Taro 提供的多端 UI 库打包能力，可以打包出一个多端运行的 UI 库，目前已经支持 微信/支付宝/百度小程序以及 H5，RN 端的支持还在调研中
多端 UI 库的项目目录结构与普通 Taro 项目基本一致，不同点如下
需要在 src 目录下添加 index.js 或者 index.ts 来作为 UI 库的入口文件，用于输出 UI 组件，如果有多个 UI 组件，可以如下书写
export { default as A } from './components/A/A'
export { default as B } from './components/B/B'这样的话，这个组件库使用起来，会是如下的方式
import { A } from 'taro-ui-sample'
<A />如果只有 UI 组件，也可以如下书写
import A from './components/A/A'
export default A这样的话，这个组件库使用起来，会是如下的方式
import A from 'taro-ui-sample'
<A />为了打包出可以在 H5 端使用的组件库，需要在 config/index.js 文件中增加一些配置
if (process.env.TARO_BUILD_TYPE === 'ui') {
Object.assign(config.h5, {
enableSourceMap: false,
enableExtract: false,
enableDll: false
})
config.h5.webpackChain = chain => {
chain.plugins.delete('htmlWebpackPlugin')
chain.plugins.delete('addAssetHtmlWebpackPlugin')
chain.merge({
output: {
path: path.join(process.cwd(), 'dist', 'h5'),
filename: 'index.js',
libraryTarget: 'umd',
library: 'taro-ui-sample'
},
externals: {
nervjs: 'commonjs2 nervjs',
classnames: 'commonjs2 classnames',
'@tarojs/components': 'commonjs2 @tarojs/components',
'@tarojs/taro-h5': 'commonjs2 @tarojs/taro-h5',
'weui': 'commonjs2 weui'
}
})
}
}以上配置可以根据需要自行修改。
package.json 中 dependencies 中只放必要的依赖，并且建议尽量精简，原有 Taro 相关的依赖可以放到 devDependencies 中，这样安装 UI 库的时候不需要再重复安装
在完成以上项目结构改造后，你就可以获得一个 Taro 的多端 UI 库的项目了
这时候你可以通过如下命令来进行打包
$ TARO_BUILD_TYPE=ui taro build --ui打包之后的文件在 dist 目录下
里面会包含一个 index.js 的入口文件，内容如下，需要注意的是，这个内容是 Taro 自动生成的，不可修改
if (process.env.TARO_ENV === 'h5') {
module.exports = require('./h5/index')
module.exports.default = module.exports
} else {
module.exports = require('./weapp/index')
module.exports.default = module.exports
}H5 端以及小程序类（微信/支付宝/百度）的文件分别在 h5 和 weapp 目录下，通过入口文件就能在不同的端内进行引用
推荐采用 jest 进行测试，项目中已经包含了完整的测试配置与范例，可以直接使用，有以下值得注意的地方
转换器使用 babel-jest，为了配合 babel 7 进行使用，需要安装
$ yarn add --dev babel-jest babel-core@^7.0.0-bridge.0 @babel/core其中 babel-core@^7.0.0-bridge.0 一定要安装
由于测试使用了 babel 7，为了避免和 Taro 本身使用的 babel 冲突，测试使用的 babel 配置位于 babel.config.js 中
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent