React 字节跳动开源项目arco-design 按需加载配置

说明

arco-design是字节跳动开源的全面开源的企业级产品设计系统，支持Vue和React，本文介绍的是React版本按需加载方式

资源地址

• github:arco-design
• 官方文档：文档

问题

使用 create-react-app 创建的app配置项默认都是隐藏的，当然有提供eject命令显示所有配置，但是为了不破环默认配置项。我们尽量不要在默认的文件里修改,接下来介绍两种方式

• 方式一：react-app-rewired
• 方式二：craco

方式一

由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra

安装依赖

npm install react-app-rewired customize-cra -D
# or
yarn add react-app-rewired customize-cra -D

修改script启动命令

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

创建配置文件

在项目更目录下创建config-overrides.js文件

⚠️style: "css", 样式按需加载,文档里面是true是无效的，需要改为css

// config-overrides.js
const { override, fixBabelImports } = require("customize-cra");

module.exports = {
  webpack: override(
    fixBabelImports("import", {
      libraryName: "@arco-design/web-react",
      libraryDirectory: "es",
      camel2DashComponentName: false,
      style: "css", // 样式按需加载,文档里面是true是无效的，需要改为css
    }),
   
};

然后重新启动就可以了

方式二

安装依赖

npm install @craco/craco -D
# or
yarn add @craco/craco -D

修改script启动命令

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

创建配置文件

在项目更目录下创建craco-config.js文件

⚠️style: "css", 样式按需加载,文档里面是true是无效的，需要改为css

// craco-config.js
module.exports = {
  babel: {
    plugins: [
      [
        "import",
        {
          libraryName: "@arco-design/web-react",
          libraryDirectory: "es",
          camel2DashComponentName: false,
          style: "css", // 样式按需加载
        },
      ],
    ],
  },
};

然后重新启动就可以了