React开发环境create-react-app自定义配置

可以选择 npm run eject 进行自定义，但是正常我们也不需要改那么多配置，也行只需要支持less编译或者antd相关组件等等.当然我们也可以完全自己自定义webpack的配置文件.

借助插件重写react脚手架配置:

---

• 安装 react-app-rewired 和 customize-cra 。

npm i -D react-app-rewired customize-cra

• 修改 package.json 下的 scripts 如下：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
}

• 项目根目录下创建 config-overrides.js 配置文件

/* config-overrides.js */
const { override } = require('customize-cra')
module.exports = override(
  //重写的代码
)

引入less支持

• 安装 less 和 less-loader

npm i -D less less-loader

• 修改 config-overrides.js 的配置

/* config-overrides.js */
const { 
    override,
    addLessLoader
} = require('customize-cra')
module.exports = override(
    addLessLoader(), // less插件
)

引入antd支持，按需加载

• 安装 antd 和 babel-plugin-import

npm i -S antd
npm i -D babel-plugin-import

• 修改 config-overrides.js 的配置

/* config-overrides.js */
const {
    override,
    addLessLoader,
    fixBabelImports //按需加载配置函数
  } = require("customize-cra");
module.exports = override(
     fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true  //自动打包相关的样式 默认为 style:'css'
    }),
    // addLessLoader(),
    // 自定义样式
    addLessLoader({
      lessOptions: {
        javascriptEnabled: true,
        modifyVars: { '@primary-color': '#1DA57A' },
      },
    }),
)

引入装饰器支持

• 修改 config-overrides.js 的配置

/* config-overrides.js */
const {
    override,
    addDecoratorsLegacy, // 装饰器支持
  } = require("customize-cra");
module.exports = override(
    addDecoratorsLegacy(), // 装饰器支持
)

总结

---

本次使用create-react-app 脚手架创建了项目，集成了react-router、antd、less。具体配置如下：

// config-overrides.js
const {
    override,
    addDecoratorsLegacy,
    addLessLoader,
    fixBabelImports //按需加载配置函数

  } = require("customize-cra");

  module.exports = override(
    addDecoratorsLegacy(),
    fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true  //自动打包相关的样式 默认为 style:'css'
    }),
    // addLessLoader(),
    addLessLoader({
      lessOptions: {
        javascriptEnabled: true,
        modifyVars: { '@primary-color': '#1DA57A' },
      },
    }),

  ); 

// package.json
{
  "name": "piano-ms-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "antd": "^4.3.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-plugin-import": "^1.13.0",
    "customize-cra": "^1.0.0",
    "less": "^3.11.3",
    "less-loader": "^6.1.3",
    "react-app-rewired": "^2.1.6"
  }
}