引入方式

npm i zsmarter-ui

自动引入 css

引入插件： babel-plugin-import

配置 umi 项目

/* config/config.ts or  .umirc.ts */
import fs from 'fs';
import path from 'path';

export default defineConfig({
  extraBabelPlugins: [
    [
      'import',
      {
        libraryName: 'zsmarter-ui',
        customName: (name: string) => {
          const pathToModule = path.join('node_modules', 'zsmarter-ui', 'es', name);
          return fs.existsSync(pathToModule) ? `zsmarter-ui/es/${name}` : `antd/es/${name}`;
        },
        style: true,
      },
    ],
  ],
});

使用 webpack（create-react-app）

使用 craco

yarn add @craco/craco babel-plugin-import craco-less -D

or

npm i @craco/craco babel-plugin-import craco-less -D

替换启动命令

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

配置 craco.config.js

/* craco.config.js */
const CracoLessPlugin = require('craco-less');
const fs = require('fs');
const path = require('path');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              'root-entry-name': 'variable',
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
  babel: {
    plugins: [
      [
        'import',
        {
          libraryName: 'zsmarter-ui',
          customName: name => {
            const pathToModule = path.join('node_modules', 'zsmarter-ui', 'es', name);
            return fs.existsSync(pathToModule) ? `zsmarter-ui/es/${name}` : `antd/es/${name}`;
          },
          style: true,
        },
      ],
    ],
  },
};