从0到1搭建基于@tarojs/components组件库

前言

最近项目任务没有很重，都是自己在学习东西，为接下来的项目做技术准备（RN和NestJS），中间还夹杂着些bug或小功能要改。在改动的过程中就发现了一个问题，使用组件时，这个组件我并不知道有什么具体功能也不知道长什么样子，我能不能直接用？不像element-ui开打官网，想用什么就找什么。可能之前大家都是忙于业务的开发，也没有想到这个。

这只是一部分，下面还有很多很多

于是我就开始搭建基于@tarojs/components小程序组件库了，让开发有一个好的体验，顺便也提升一下自己。后面有demo仓库。

技术选型： Taro``+@tarojs/components+React+webpack(打包组件库)+jest(单元测试)+storybook(Ul开发、测试和文档编写)

正文

根据提示创建项目

csharp 复制代码

taro init

接下来就是漫长的配置过程

jest配置

在创建完项目时，就自带了jest可以进行单元测试。但是这时候运行 pnpm run test会报错。解决方法看这个，将taro版本退回到3.6.22，就可以解决。

Taro3.6.24模板项目创建后运行测试报错 · Issue #38 · NervJS/taro-test-utils (github.com)

当我们编写完 button组件并进行测试，还是报错。这是因为Jest默认是不知道如何处理样式文件（如CSS或SCSS）的，因为它主要是用来测试JavaScript代码。

安装

sql 复制代码

pnpm add identity-obj-proxy

修改jest.config.ts文件，修改完再次运行就可以了。

ts 复制代码

const defineJestConfig = require('@tarojs/test-utils-react/dist/jest.js').default

module.exports = defineJestConfig({
  //其他配置
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy'
  },
})

运行pnpm run test,可以看到运行成功。

剩下就是对测试工具的使用了，可以看下面两个文档。

NervJS/taro-test-utils: 多端单测工具 (github.com)

快速开始 · Jest (jestjs.io)

配置storybook

安装storybook

csharp 复制代码

npx sb init

taro如何配置storybook可以查看这个，第三方工具 | Taro 文档 (jd.com)

因为我在项目中使用了scss，所以还需要在.storybook/main.ts的webpackFinal中配置解析 scss

js 复制代码

webpackFinal: (config: any) => ({
   //其他
    module: {
      rules: [
        ...config.module.rules,
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader'],
        }
      ],
    },
 
  }),

运行 pnpm run storybook,可以在网页中看到了

具体的storybook配置可以查看Storybook: Frontend workshop for UI development，我也还没了解。

但是还有一个问题需要解决，就是使用taro的api时还是会报错。

这是为什么呢？官方是在.storybook/main.ts将@tarojs/taro包变成@tarojs/taro-h5，以便能在H5环境中正确运行。但是在@tarojs/taro-h5在3.5.7以后就没有@tarojs/taro-h5/dist/taroApis这个文件了。

那么就可以大胆的babel删掉了。

我们可以在控制台打印一下@tarojs/taro转为@tarojs/taro-h5身上有什么方法，很明显少了很多东西。

我们进入node_modules的@tarojs/taro-h5/dist/index.js包看一下他默认导出的对象是什么,我们可以看到它taro是默认导出的，剩下的api都是具名导出，那我们改造一下就可以了。

我们首先在文件内引入previewImage方法，然后再一起默认导出。

ok了，taro的api可以使用了，对于其他的api也是一样的操作，还是麻烦了一点。

还有一个问题就是我们刚刚改动的node-modules里面的文件，所以我们要为@tarojs/taro-h5打上补丁，这样下次安装依赖就不用改了，这里就不讲了。

打完补丁后会在目录下生成一个patches文件夹，这里放的就都是补丁文件。

还真是麻烦啊！！

配置webpack打包组件

安装webpack及其插件，这里只做了最简单的处理。还有什么需求和优化可以自己配置。

js 复制代码

const path = require("path")
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

/** @type {import('webpack'.Configuration)} */
module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'componentsDist'),
    clean: true,
    library: {
      type: 'umd',
    },
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
  },
  mode: "production",

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: "ts-loader",
          //不做ts检查只是转译
          options: {
            transpileOnly: true
          }
        },
        exclude: [
          path.resolve(__dirname, 'node_modules'),
          path.resolve(__dirname, 'src/pages')
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 提取CSS到单独的文件
          MiniCssExtractPlugin.loader,
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
    ]
  },

  plugins: [
    // 生成css文件
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],

  externals: {
    react: 'react',
    'react-dom': 'react-dom',
    '@tarojs/components': '@tarojs/components',
    '@tarojs/runtime': '@tarojs/runtime',
    '@tarojs/taro': '@tarojs/taro',
    '@tarojs/react': '@tarojs/react',
  },
}