背景

本意是为了公司内的一个小程序实现的一个基于taro和antmjs实现的一个业务组件库，主要是防止重复实现一些的组件，所以实现组件库的同时也需要一个文档。

实现

前期参考了目前的一些市面上的taro组件库，例如：antmjs和NutUI-React，而文档则是借助了dumi，使用它的原因只是因为没用过，想试试手。

基本介绍

使用lerna管理包
包的目录结构

package
  --antm-business-demo 基于taro的demo包
  --antm-business-script 一些打包脚本和demo/site使用的配置
  --antm-business-site 基于dumi的文档网站
  --antm-business-ui ui组件

组件使用rollup打包

新建组件

# cd antm-business-ui
yarn create:comp

删除组件

# cd antm-business-ui
yarn remove:comp ComponentName

新建/删除组件需要注意

你不应该通过手动新建或者删除组件文件的形式去新建和删除组件，
因为新建组件指令会额外处理其他配置，额删除指令会清楚这些配置。

打包

执行打包命令

# 在antm-business-ui目录下
yarn build

本地开发

构建 antm-business-ui

# cd antm-business-ui
yarn build

启动taro demo

# cd antm-business-ui
# 小程序端未测试
yarn dev:h5

注意

1. 修改组件之后需要重新执行yarn build（todo：监听文件内容，自动执行yarn build）。
2. demo内的对应组件的页面会再使用指令新建组件时新建

本地开发文档

# cd antm-business-site 
yarn start

发布

发包前提交本地修改

# cd antm-business
yarn pbs

部署GitHub Pages

使用gh-pages部署到GitHub Pages

# cd antm-business
yarn deploy

使用

使用antmjs和antm-business

安装

# 通过 npm 安装
npm install @antmjs/vantui
npm install @antm-business/ui

# 通过 yarn 安装
yarn add @antmjs/vantui
yarn add @antm-business/ui

默认node_modules内的模块不会被编译，需要配置

const config = {
  h5: {
    esnextModules: ["@antmjs", "@antm-business"],
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
        }
      },
      pxtransform: {
        enable: true,
        config: {},
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

配置按需加载

下载插件

npm i babel-plugin-import -D

配置

module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      ts: true
    }]
  ],
  plugins: [
    [
      "import",
      {
        "libraryName": "@antmjs/vantui",
        "libraryDirectory": "es",
        "style": (name) => `${name}/style/less`,
      },
      "@antmjs/vantui"
    ],
    [
      "import",
      {
        "libraryName": "@antm-business/ui",
        "libraryDirectory": "dist/esm/packages",
        "style": (name) => `${name}/style`,
      },
      "@antm-business/ui"
    ]
  ]
}

结语

这次实现的组件库涉及到的技术很多都是现学现用，不免有一些实现不合理的地方，也有一些可以优化的地方。也希望大家能给个意见，谢谢。

实现一个简易的taro业务组件库

背景

实现