35.搭建React开发环境

1.npx create-react-app my-app 需要node版本>14.x

2.按需加载：npm add react-app-rewired customize-cra babel-plugin-import

3.定义加载配置的js模块：config-overrides.js

module.exports = override(
  fixBabelImports("import", {
    //配置引用babel-plugin-import
    libraryName: "antd", //针对antd进行打包
    libraryDirectory: "es", //源码文件夹中的es文件夹
    style: "css", //自动打包相关的css
  })
);

4.修改package.json

"scripts": {
    "start": "react-app-rewried start",
    "build": "react-app-rewried build",
    "test": "react-app-rewried test"
  },
  "dependencies": {
    "react-app-rewired": "^2.1.11",//新增配置命令的包
    "react-scripts": "5.0.0",//原来的
  },

5.使用antd
npm install antd

import React from "react";
import { Button, message } from "antd";
class App extends React.Component {
  handleClick = () => {
    message.success("成功饿了");
  };
  render() {
    return (
      <Button type="primary" onClick={this.handleClick}>
        学习
      </Button>
    );
  }
}

export default App;

6.自定义主题色，配置less。config-overrides.js

addLessLoader({
  lessOptions: {
    javascriptEnabled: true,
    ModifyVars: { "@primary-color": "#eee" },
  },
});

7.测试：App.js。成功后可以看到按钮设置type="primary"按钮颜色显示为绿色了。

import React, { Component } from "react";
import { Button, message } from "antd";
import { render } from "react-dom";
class App extends Component {
  handleClick = () => {
    message.success("成功饿了");
  };
  render() {
    return (
      <div className="App">
        <Button
          type="primary"
          onClick={() => {
            this.handleClick();
          }}
        >
          学习
        </Button>
      </div>
    );
  }
}
export default App;

index.js

/* 
入口js
*/
import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

报错：

image-20220117205215695.png

webpack新的版本里面配置less,使用LessOptions配置

image-20220118095400326.png
降低less-loader版本为5.0.0->报如下错误:
image-20220118102031141.png

已经降低了less-loader版本还是报错，重新删掉之前的Npm包，重新Install
最终package.json文件：

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "antd": "^3.17.0",
    "babel-plugin-import": "^1.11.0",
    "customize-cra": "^0.2.12",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "react": "^16.8.6",
    "react-app-rewired": "^2.1.3",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },

补充:因为版本的问题，我们每次npm install的都是最新版本，因此有些引入的包会不兼容，需要我们点进相应包的package.json文件里面查看对应的版本，然后进行install。