React18学习之三.使用eject命令暴露封默认的安装包解析

1.使用eject命令暴露隐藏的配置项

        npm run eject

        @1这个操作是永久的，暴露出来之后无法还原

        Are you sure you want to eject? This action is permanent.

        @2如果原来项目有修改，那么会有提示暂存到本地的git仓库

2.暴露之后的目录以及相关内容解析

        

config

        +jest：打包测试        

        +webpackDevServer.config.js：webpack-dev-server(启动本地服务插件)的相关配置

        +webpack.config.js：脚手架默认的webpack打包的相关配置

        +paths.js：打包中需要的一些路径管理

        +env.js：环境变量的处理

scripts：后期执行相关打包命令的入口文件

        +build.js

        +start.js

        +test.js

3.package.json中重要包的解析

将webpack打包的所有模块，都重新安装一遍，放在了依赖项中

{
  "name": "demo",  //项目名称
  "version": "0.1.0",  //项目版本号
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",  //18版本的react
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",//脚手架中自己对打包命令的一种封装
    "web-vitals": "^2.1.4" //性能检测工具
  },
  "scripts": {//打包命令是基于reactreact-scripts处理
    "start": "react-scripts start", //开发环境：在本地启动web服务器，预览打包内容
    "build": "react-scripts build", //生产环境：打包部署，打包的内容输出到dist目录中
    "test": "react-scripts test", //单元测试
    "eject": "react-scripts eject" // 暴露webpack配置规则（因为想修改打包规则）
  },
  "eslintConfig": {//对webpack中Eslint词法检测的相关配置，
    "extends": [   //词法检测：1.词法错误（不符合标准规范）2.符合标准，但不符合Eslint检测
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": { //基于browserslist规范，设置浏览器的兼容情况
    "production": [//生产环境下
      ">0.2%", //使用率超过0.2%的浏览器
      "not dead", //不考虑IE
      "not op_mini all" //不考虑欧朋
    ],
    "development": [//开发环境下，默认配置不兼容低版本和IE浏览器
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

4.给项目配置less

因为create-react-app的脚手架默认安装sass包

第一步：安装less的包

        npm add less less-loader@8

第二步：移除sass的包

        npm remove sass-loader

第三步：修改webpack.config.js中关于样式的打包规则配置

create-react-app教授叫默认webpack规则的修改：直接去暴露的源码中改，所以需要具备webpack能力

修改return/module中的sassRegex和sassModuleRegex的配置为lessRegex，lessModuleRegex

将return/module中的处理sass的修改为less

        

测试less是否配置完善

src文档中新建index.less文件

在入口src/index.jsx中去引入index.less文件

import './index.less'

编码的less样式生效，完成配置

5.别名配置

在webpack.config.js的return中的resolve解析器里面配置alias

用@代表src目录

因为paths.js这个目录已经配置了项目路径，可以使用paths.的方式使用该路径

修改之后直接使用下面方式导入样式

import '@/index.less'

6.配置域名和端口号

方法一：在script/start.js中去修改，搜索DEFAULT_PORT/HOST，在没有默认的环境变量的时候也可以直接修改后者

方法二： 通过设置默认环境变量process.env修改

cross-env的简介、原因、安装和用法_小粗腿Cc的博客-CSDN博客

安装： npm install --save-dev cross-env

去package.json里面修改启动命令，使用cross-env修改

7.修改浏览器兼容

在package.json中修改browserslist的配置

修改兼容列表，实现浏览器的兼容

@1对postcss-loader生效，控制CSS3的前缀

@2对babel-loader生效，控制ES6的转换

遗留问题

无法处理ES6内置API的兼容

我们需要@babel/polyfill，对常见内置的API重写

使用@babel/polyfill的方法

方法一：

        安装:npm i @babel/polyfill

        引入:import '@babel/polyfill'

方法二：

 其实在脚手架中已经有react-app-polyfill这个包，对@babel/polyfill进行了重写,我们无需安装，

在入口文件中引入即可

8.跨域代理配置

脚手架配置中，如果存在proxySetup这个文件，将会用这个文件进行跨域代理

第一步：在src目录中创建proxySetup.js文件

第二步：安装进行跨域代理的模块 http-proxy-middleware

                npm i http-proxy-middleware

http-proxy-middleware：实现跨域代理的模块，webpack-dev-server的跨域代理原理，也是基于它完成的

第三步： 使用http-proxy-middleware进行跨域代理请求

        

跨域的具体博客见此文