sn-taro-ui

Taro 第三方 UI 库自定义封装一些常用的组件及 Taro 工具类

Usage no npm install needed!

<script type="module">
  import snTaroUi from 'https://cdn.skypack.dev/sn-taro-ui';
</script>

README

基于 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 'sn-taro-ui'

<A />

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

import A from './components/A/A'

export default A

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

import A from 'sn-taro-ui'

<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: 'sn-taro-ui'
      },
      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