多端 UI 库的项目目录结构与普通 Taro 项目基本一致，不同点如下

增加一个 UI 库入口文件

RN 端 index.js 已经被占用，如果要兼容 RN 端，需改为其他名字，并通过 --ui-index指定入口文件。

需要在 src 目录下添加 index.js 或者 index.ts 来作为 UI 库的入口文件，用于输出 UI 组件，如果有多个 UI 组件，可以如下书写

  1. export { default as A } from './components/A/A'
  2. export { default as B } from './components/B/B'

这样的话，这个组件库使用起来，会是如下的方式

  1. import { A } from 'taro-ui-sample'
  2. <A />

如果只有 UI 组件，也可以如下书写

  1. import A from './components/A/A'
  2. export default A

这样的话，这个组件库使用起来，会是如下的方式

  1. import A from 'taro-ui-sample'
  2. <A />

配置文件改造

为了打包出可以在 H5 端使用的组件库，需要在 config/index.js 文件中增加一些配置

  1. if (process.env.TARO_BUILD_TYPE === 'ui') {
  2.   Object.assign(config.h5, {
  3.     enableSourceMap: false,
  4.     enableExtract: false,
  5.     enableDll: false
  6.   })
  7.   config.h5.webpackChain = chain => {
  8.     chain.plugins.delete('htmlWebpackPlugin')
  9.     chain.plugins.delete('addAssetHtmlWebpackPlugin')
  10.     chain.merge({
  11.       output: {
  12.         path: path.join(process.cwd(), 'dist', 'h5'),
  13.         filename: 'index.js',
  14.         libraryTarget: 'umd',
  15.         library: 'taro-ui-sample'
  16.       },
  17.       externals: {
  18.         nervjs: 'commonjs2 nervjs',
  19.         classnames: 'commonjs2 classnames',
  20.         '@tarojs/components': 'commonjs2 @tarojs/components',
  21.         '@tarojs/taro-h5': 'commonjs2 @tarojs/taro-h5',
  22.         'weui': 'commonjs2 weui'
  23.       }
  24.     })
  25.   }
  26. }

以上配置可以根据需要自行修改。