基于 Taro 的多端 UI 库示范用例
Clone or download
Latest commit 3a8698f Dec 18, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
@types init Oct 30, 2018
__mock__ init Oct 30, 2018
config init Oct 30, 2018
src 更新组件露出方式 Nov 9, 2018
.editorconfig init Oct 30, 2018
.eslintrc init Oct 30, 2018
.gitignore init Oct 30, 2018
README.md docs: 更新说明 Oct 30, 2018
babel.config.js init Oct 30, 2018
global.d.ts init Oct 30, 2018
jest.config.js init Oct 30, 2018
package.json 升级依赖 Dec 18, 2018
project.config.json init Oct 30, 2018
tsconfig.json init Oct 30, 2018
yarn.lock 升级依赖 Dec 18, 2018

README.md

基于 Taro 的多端 UI 库示范用例

通过 Taro 提供的多端 UI 库打包能力,可以打包出一个多端运行的 UI 库,目前已经支持 微信/支付宝/百度小程序以及 H5,RN 端的支持还在调研中

多端 UI 库项目结构

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

增加一个 UI 库入口文件

需要在 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 依赖处理

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 端以及小程序类(微信/支付宝/百度)的文件分别在 h5weapp 目录下,通过入口文件就能在不同的端内进行引用

项目测试

推荐采用 jest 进行测试,项目中已经包含了完整的测试配置与范例,可以直接使用,有以下值得注意的地方

使用 babel-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.config.js

由于测试使用了 babel 7,为了避免和 Taro 本身使用的 babel 冲突,测试使用的 babel 配置位于 babel.config.js