03月04, 2021

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

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

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

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


  • 安装 react-app-rewiredcustomize-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支持

  • 安装 lessless-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支持,按需加载

  • 安装 antdbabel-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"
  }
} 

本文链接:https://901web.com/post/react-kaifa-huanjing-peizhi.html

-- EOF --

Comments

请在后台配置评论类型和相关的值。