dumi组件库开发

青草酱
3,351 阅读4分钟

一、为什么要使用dumi

文档齐全，使用简单。

二、站点模式和文档模式

站点模式的样式比较丰富，文档模式的组件展示是以文档的形式的。

三、基础配置

node版本应在14以上。创建dumi项目，并选择library模式为文档模式：

npx create-dumi

启动

npm run start

1、默认nav分组更改

image.png 修改nav分组，在md中增加：

nav:
  title: 组件11
  path: /components

2、组件的分组划分

当前组件的组划分：

image.png group: path: /components title: 普通组件

3、文件的alias设置

安装

npm i eslint-import-resolver-babel-plugin-root-import babel-plugin-import babel-plugin-root-import

tsconfig.json文件中增加配置：

    "paths": {
      "@@/*": [".dumi/tmp/*"],
      "xvnext-components": ["src"],
      "xvnext-components/*": ["src/*", "*"],
      "@/utils/*": ["src/utils/*"],
      "@/icon/*": ["src/icon/*"]
    }

.eslintrc.js文件中增加配置：

  settings: {
    'import/resolver': {
      'babel-plugin-root-import': {
        rootPathSuffix: '/',
        rootPathPrefix: '@/',
      },
    },
  },

.dumirc.ts文件中配置：

 alias: {
    '@/utils': '/utils',
  },

4、全局样式的引用

image.png

5、commit时，不校验less文件

dumi默认的class为驼峰或者下划线分割，如果有其他格式，则会在commit时，报以下错误：

Expected class selector to be kebab-case or lowerCamelCase  selector-class-pattern

将package.json中的lint-staged里面关于less的校验关闭了。

6、配置引入antd

.dumirc.ts文件中增加：

 extraBabelPlugins: [
    [
      'babel-plugin-import',
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      },
    ],
  ],

7、安装npm i -D @types/react @types/react-dom ​，防止类型报错

8、打包配置

.dumirc.ts文件中增加outputPath为'doc-dist'，doc-dist为我的doc文件的存放目录。 并包含 .fatherrc.ts文件中增加：

  umd: {
    externals: {
      react: 'react',
      'react-dom': 'react-dom',
    },
    output: 'dist',
    theme: {
      prefixClx: 'x-comp'
    },
    chainWebpack(memo) {
      memo.optimization.splitChunks({
        cacheGroups: {
          antdesigns: {
            name: 'antdesigns',
            chunks: 'all',
            test: /[\\/]node_modules[\\/](@ant-design|antd)[\\/]/,
            priority: -11,
          },
        },
      });
      return memo;
    },
  },

打包成esm、cjs格式，output为输出目录。

9、生成文档

上面已经配置好了，使用npm run docs:build，就可以打包出文档了。

10、doc文档库jekins配置

参考jekins配置项目

11、切换源+创建账号

npm config list
npm set registry https://xx.com
npm adduser

输入要创建的用户名、密码、邮箱即可。

四、知识点：

1、main和module main 和 module 字段都用于指定入口文件。 main是commonJS规范中的字段。 module是ESM规范中的字段。

2、typings和types typings 与 types 一样，只是另一种写法。

如果没有指定 types 或 typings，那么就会在根目录下寻找 index.d.ts 文件，将它视为此库的类型声明文件。

如果没有找到 index.d.ts 文件，那么就会寻找入口文件（package.json 中的 main 字段指定的入口文件）是否存在对应同名不同后缀的 .d.ts 文件。

五、问题点

1、增加jest之后，npm run test可以通过，但是在commit时，提示：

image.png

我当前项目的路径是：/Users/xiaotingfeng/demo/umi-demo/dumi-template，所以其实报错的原因是读取.eslintrc.js时，去了项目上层的demo里取。 解决：删除package.json中*.{ts,tsx}的eslint --fix，提交之后，再还原，就不会再报这个问题。具体的原因不清楚，这次好了，下次可能还会出现。

2、utils在src外，不会被打包，并且utils在dist中的引用为相对路径. 解决：

  • 将utils放在src下，组件放在src/components下。
  • tsconfig.json中配置paths为： "@/utils/*": ["src/utils/*"]
  • .dumirc.ts中配置：
alias: {
    '@/utils': '/src/utils',
  },
  resolve: {
    atomDirs: [{ type: 'components', dir: 'src/components' }],
  },

3、为class添加一个全局变量；

  • .dumirc.ts中配置： defineConfig({ ... define: { x: 'test' } ... })
  • .fatherrc.ts中配置： defineConfig({ ... define: { x: 'test' } ... })

4、安装lodash： npm i @types/lodash-es; npm i lodash-es;

jest.config.ts中配置：

  transformIgnorePatterns: ['/node_modules/(?!(lodash-es))'],

5、 Cannot find module '@/utils/utils' from 'node_modules/@umijs/test/setupFiles/shim.js' jest.config.js中添加：

  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '\\.(jpg|png|svg)$': '<rootDir>/test/__mocks__/fileMock.js',
    '\\.(css|less|scss)$': '<rootDir>/test/__mocks__/styleMock.js',
  },

6、全局变量在jest中找不到 jest.config.js中添加：

globals:  {
    prefixClx: 'x-comp',
  },

7、iconfont在jest时，报：

image.png 解决：

  moduleNameMapper: {
    '@/icon/iconfont': '<rootDir>/test/__mocks__/styleMock.js',
    '^@/(.*)$': '<rootDir>/src/$1',
    '\\.(jpg|png|svg)$': '<rootDir>/test/__mocks__/fileMock.js',
    '\\.(css|less|scss)$': '<rootDir>/test/__mocks__/styleMock.js',
  },

8、dumi Module xxx does not exist in container. 解决： 删除.dumi、node_modules重新下载和启动就好了，因为可以清除缓存。

9、打包之后less中，全局变量也不生效 原因：less没有被编译成css，导致less文件中的所有样式都没有被使用。 解决：使用umd格式打包。

10、Cannot find module 'react-dom/test-utils' from 'node_modules/@testing-library/react/dist/act-compat.js'

原因：在进行npm link时，没有安装react、react-dom。

11、antd的组件class中，包含有变量，不能直接覆盖，得通过StyleProvider和ConfigProvider。关于token可以在antd对应组件下方找到。这样写之后，css就没有变量了，可以less直接覆盖一部分

 <StyleProvider
      hashPriority="high"
      transformers={[legacyLogicalPropertiesTransformer]}
    >
    <ConfigProvider
        locale={zhCN}
        prefixCls={prefixClx}
        theme={{
          token: {
            margin: 28
          }
        }}
      >
      ....
      </ConfigProvider>
</StyleProvider>

12、link之后，提示： image.png

原因：npm包和项目的react、react-dom的版本不一致 解决：组件库打包之后，删除node_module中的react、reac-dom，在项目中npm i，并重新link就可以了。

13、采用umd打包后，link时，会报useState的错。 解决：在.fatherrc.ts里面配置，将react、react-dom的代码不打包进去就好：

  umd: {
    output: 'dist',
    externals: {
      react: 'react',
      'react-dom': 'react-dom',
    },
  },

本dumi模版已经集成到rumnet中，安装好直接使用即可。大家有什么问题可以在这里反馈！！！

avatar
文章
阅读
粉丝