基于 Taro 開發(fā)第三方多端 UI 庫

通過 Taro 提供的多端 UI 庫打包能力，可以打包出一個多端運行的 UI 庫，目前已經(jīng)支持 微信/支付寶/百度小程序以及 H5，RN 端。示例項目 taro-ui-sample

多端 UI 庫項目結(jié)構(gòu)

多端 UI 庫的項目目錄結(jié)構(gòu)與普通 Taro 項目基本一致，不同點如下

增加一個 UI 庫入口文件

RN 端 index.js 已經(jīng)被占用，如果要兼容 RN 端，需改為其他名字，并通過 --ui-index指定入口文件。

需要在 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'
      }
    })
  }
}

以上配置可以根據(jù)需要自行修改。

打包命令

在完成以上項目結(jié)構(gòu)改造后，你就可以獲得一個 Taro 的多端 UI 庫的項目了

這時候你可以通過如下命令來進(jìn)行打包

$ TARO_BUILD_TYPE=ui taro build --ui --ui-index=${CUSTOM_ENTRY}

只有當(dāng) UI 庫入口文件非 index.js 時，才需要通過 --ui-index指定入口文件，其中 CUSTOM_ENTRY 為自定義的 UI 庫入口文件。

打包之后的文件在 dist 目錄下

里面會包含一個 index.js 的入口文件，內(nèi)容如下，需要注意的是，這個內(nèi)容是 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 目錄下，通過入口文件就能在不同的端內(nèi)進(jìn)行引用

項目測試

推薦采用 Jest 進(jìn)行測試，項目中已經(jīng)包含了完整的測試配置與范例，可以直接使用，有以下值得注意的地方

使用 babel-jest

轉(zhuǎn)換器使用 babel-jest，為了配合 babel 7 進(jìn)行使用，需要安裝

$ yarn add --dev babel-jest babel-core@^7.0.0-bridge.0 @babel/core

其中 babel-core@^7.0.0-bridge.0 一定要安裝

babel.config.js

由于測試使用了 babel 7，為了避免和 Taro 本身使用的 babel 沖突，測試使用的 babel 配置位于 babel.config.js 中