使用 create-react-app 构建React工程化项目

安装create-react-app

$ npm i create-react-app -g 「mac需要加sudo」

基于脚手架创建项目「项目名称需要符合npm包规范」

$ create-react-app xxx

|- node_modules 包含安装的模块
|- public 页面模板和IconLogo
|- favicon.ico
|- index.html
|- src 我们编写的程序
|- index.jsx 程序入口「jsx后缀名可以让文件支持jsx语法」
|- package.json
|- ...

package.json

{
  ...
  "dependencies": {
    ...
    "react": "^18.2.0",  //核心
    "react-dom": "^18.2.0",  //视图编译
    "react-scripts": "5.0.1", //对打包命令的集成
    "web-vitals": "^2.1.4"  //性能检测工具
  },
  "scripts": {
    "start": "react-scripts start", //开发环境启动web服务进行预览
    "build": "react-scripts build", //生产环境打包部署
    "test": "react-scripts test",   //单元测试
    "eject": "react-scripts eject"  //暴露配置项(默认隐藏配置项)
  },
  "eslintConfig": {  //ESLint词法检测
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {  //浏览器兼容列表
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

默认情况下，会把webpack配置项隐藏到node_modules中，如果想修改，则需要暴露配置项：

$ yarn eject

/* package.json中的变化 */
{
  "dependencies":{  //暴露后，webpack中需要的模块都会列在这
     ...
  },
  "scripts": {
    "start": "node scripts/start.js",  
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
    //不在基于react-scripts处理命令，而是直接基于node去执行对应的文件
    //已经没有eject命令了
  },
  "jest": {
    //单元测试配置
  },
  "babel": {  //关于babel-loader的额外配置
    "presets": [
      "react-app"
    ]
  }
}

/* 新增的内容 */
|- scripts
    |- start.js
    |- build.js
    |- ...
|- config
    |- webpack.config.js
    |- paths.js
    |- ...

babel-loader
把ES6转换为ES5的，语法转换之前，需要用到语法包 @babel/preset-env

脚手架中用的语法包：babel-preset-react-app
React官方对 @babel/preset-env 的重写，目的是让其支持JSX语法的编译！！

配置预览域名

// scripts/start.js
// 48
const HOST = process.env.HOST || '127.0.0.1';
// 也可以基于 cross-env 设置环境变量

 "scripts": {
        "start": "cross-env PORT=8080 HOST=127.0.0.1 HTTPS=true node scripts/start.js",
        "build": "node scripts/build.js",
        "test": "node scripts/test.js"
    },

配置跨域代理

src/setupProxy.js

/*
安装 http-proxy-middleware
$ yarn add http-proxy-middleware

src/setupProxy.js
*/
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(
        createProxyMiddleware("/api", {
            target: "http://127.0.0.1:7100",
            changeOrigin: true,
            ws: true,
            pathRewrite: { "^/api": "" }
        })
    );
};

配置别名

//313
resolve: {
  ...
  alias: {
    '@': path.appSrc,
    ...
  }
}

path.appSrc --->appSrc: resolveApp('src'),


//@/....

配置浏览器兼容

//package.json
//https://github.com/browserslist/browserslist
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

/*
CSS兼容处理：设置前缀
autoprefixer + postcss-loader + browserslist

JS兼容处理：ES6语法转换为ES5语法
babel-loader + babel-preset-react-app(@babel/preset-env) + browserslist

JS兼容处理：内置API
入口配置react-app-polyfill
*/
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

手动安装配置

"axios": "^1.3.3",//请求
    "qs": "^6.11.0",
    "blueimp-md5": "^2.19.0",//加密
    "echarts": "^5.4.1",//图表（统计图）
    "fastclick": "^1.0.6",//取消移动端单击延迟
    "antd": "^5.2.2",
    "antd-icons": "^0.1.0-alpha.1",
    "antd-mobile": "^5.28.0",//PC和移动端需要用到的组件库
    "antd-mobile-icons": "^0.3.0",
    "prop-types": "^15.8.1",//传递的属性校验
    "styled-components": "^5.3.6",//样式私有化
    "react-jss": "^10.10.0",
    "lib-flexible": "^0.3.2",// rem响应式布局
    "postcss-pxtorem": "^6.0.0",//px转rem
    "less": "4.1.3",//less->css
    "less-loader": "8.1.1",
    "cross-env": "^7.0.3",//设置环境变量的
    "http-proxy-middleware": "^2.0.6",//设置跨域代理
    "redux": "^4.2.1",
    "redux-logger": "^3.0.6",
    "redux-promise": "^0.6.0",
    "redux-saga": "^1.2.2",
    "redux-thunk": "^2.4.2",
    "react-redux": "^8.0.5",
    "@reduxjs/toolkit": "^1.9.3",//公共状态管理
    "react-router-dom": "^6.8.1",//路由
    "mobx": "^6.8.0",
    "mobx-react": "^7.6.0",//另外一种公共状态管理
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-decorators": "^7.21.0",//类的装饰器

使用create-react-app的时候，如果想修改脚手架生成的默认配置项，达到我们项目期望的效果、

1. 首先去读源码[需要我们对webpack有一定了解]
2. 了解其内部的处理机制，可我就可以基于：

• 基于 cross-env 设置环境变量修改一些需求

• 或者直接修改源码

---

• 也可以基于roahog 修改 create-reat-app的配置[但是一样对webpack有一些基础的要求]{无需要$yarn eject 暴露设备项，直接配置 .roadhogrc 去修改相关的配置即可}

---

一般我们都会修改啥？

+配置预编译语言「默认是Sass」

+配置别名

+配置浏览器的兼容

+配置跨域代理

+配置本地启动服务器的相关信息

+还有一些优化项

...