rcrai-rainbow

rcrai-rainbow 是基于 Ant 二次开发的业务组件库，主要用于研发企业级中后台产品。

安装

1.使用 npm 或者 yarn 安装

yarn add rcrai-rainbow

2.支持浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 rainbow。

在 npm 发布包内的 rcrai-rainbow/dist 目录下提供了 rainbow.js rainbow.css 以及 rainbow.min.js rainbow.min.css。

按需加载

目前组件库已实现按需导入，具体开启方式需要在项目的 umi 配置文件中添加如下配置：

export default {
  extraBabelPlugins: [
    [
      'import',
      {
        libraryName: 'rcrai-rainbow',
        libraryDirectory: 'es',
        style: (name: string, file: any) => {
          /** 过滤一些不需要按需导入less文件的组件 */
          const reg = /\/use|\/RIcon|\/umi|\/utils/;
          if (reg.test(name)) {
            return false;
          }

          /** 临时解决历史deleteModal，confirmModal 导入问题 */
          const _reg = /\/deleteModal|\/confirmModal/;
          if (_reg.test(name)) {
            return `rcrai-rainbow/es/RModal/style`;
          }

          return `${name}/style`;
        },
        camel2DashComponentName: false,
        customName: (name: string) => {
          if (name.indexOf('use') === 0) {
            return `rcrai-rainbow/es/hooks/${name}`;
          }
          if (['deleteModal', 'confirmModal'].indexOf(name) > -1) {
            return `rcrai-rainbow/es/RModal/${name}`;
          }
          return `rcrai-rainbow/es/${name}`;
        },
      },
    ],
  ],
};

对于老版本 umi 项目，由于 css modules 导致按需导入的组件库样式无法生效，可以采用如下方式解决：

/* 在项目的全局样式文件（如global.less）中导入 rainbow样式 */
@import '~rcrai-rainbow/dist/rainbow.css';

同时按需加载的配置目前也已经集成到 rcrai-rainbow 中，我们可以直接引用。

• 全量按需导入组件
• 仅按需导入组件的 js

如下：

// 全量按需导入的配置， 建议在新项目中使用
import { defaultUmiImportAllConfig } from 'rcrai-rainbow/lib/templates';
// 老项目可以直接使用组件的js按需导入
import { defaultUmiImportJsConfig } from 'rcrai-rainbow/lib/templates';