【React】脚手架进阶

暴露webpack配置

react-scripts对脚手架中的打包命令进行封装，如何暴露这些打包配置呢？上篇写到在package.json中的scripts配置项中有eject属性

javascript 复制代码

 "scripts": {
    "eject": "react-scripts eject"
  },

执行下面命令

javascript 复制代码

yarn run eject

之后会有以下的提示，表示react-scripts eject是不可逆的。

随后又会有其他提示：

意思是当前的 Git 仓库中存在未跟踪的文件（untracked files）或未提交的更改（uncommitted changes）。初始化一个本地git仓库，提交本地修改记录

javascript 复制代码

git init
git add .
git commit -m 'Update'

随后再次执行yarn run eject命令，最后会把配置文件暴露出来，如下：

package.json的变化

package.json中会安装很多依赖，会把打包所需要的依赖都重新安装一遍。

其中babel-preset-react-app是对@babel/preset-env（ES6转ES5）语法包的重写，目的是让语法包可以识别React语法，实现代码转换。

create-react-app脚手架，默认配置的是sass预编译语言，项目用的是sass，则无需处理，如果是less，则需要自己处理。

另外不在用react-scripts封装的插件去执行命令，直接基于node，去执行对应入口的文件，eject命令没有了。如下：

javascript 复制代码

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },

下面的配置，类似于babel.config.js对babel-loader的额外配置

javascript 复制代码

  "babel": {
    "presets": [
      "react-app"
    ]
  }

修改webpack.config.js

配置less

当我们使用less时候，需要进行以下修改:

javascript 复制代码

yarn add less less-loader@8 # 新版本的 less-loader 兼容性不好

修改域名、端口号

可以在 scripts/start.js 文件中修改：

javascript 复制代码

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; // 可修改端口号
const HOST = process.env.HOST || '0.0.0.0'; // 可修改 IP（或域名）

如果要基于环境变量修改，则安装cross-env插件

javascript 复制代码

yarn add cross-env -D

javascript 复制代码

// 修改前
"scripts": {
    "start": "node scripts/start.js",
    ...
},
// 修改后
"scripts": {
    "start": "cross-env PORT=8080 node scripts/start.js",
    ...
},

浏览器兼容处理

浏览器兼容需要在package.json中的browserslist设置，如下：

javascript 复制代码

 "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

但是只能解决两个问题：

1.对postcss-loader生效：控制CSS3前缀

2.对babel-loader生效：控制ES6的转换

无法解决ES6内置API的兼容，常见解决办法就是使用@babel/polyfill（对常见内置的API重写），可以yarn add @babel/polyfill，然后在入口import "@babel/polyfill" ，但是React的脚手架默认带了react-app-polyfill(对@babel/polyfill重写)，只需要在入口文件引入：

javascript 复制代码

// 对 ES6 内置 API 的兼容性处理
import 'react-app-polyfill/ie9'
import 'react-app-polyfill/ie11'
import 'react-app-polyfill/stable'

在 create-react-app 脚手架中，使用了 react-app-polyfill 来替代 @babel/polyfill，因为它提供了对 IE9、IE11 和最新稳定版本的兼容性，并且可以显式地进行按需导入。其具体的作用如下：

import 'react-app-polyfill/ie9'：为 IE9 及以下版本提供 JavaScript 环境的 polyfill。
import 'react-app-polyfill/ie11'：为 IE11 提供必要的 polyfill。
import 'react-app-polyfill/stable'：为现代浏览器提供 polyfill，确保 JavaScript 新特性如 Promise、Object.assign 等可用。

为什么重写 @babel/polyfill 为 react-app-polyfill？

兼容性： react-app-polyfill已经专门为 React 项目优化，能更好地适配 React 的工作方式，尤其是在处理旧版浏览器时的表现。

按需加载：react-app-polyfill 允许你只按需引入支持的浏览器版本，而不像 @babel/polyfill 一开始就会加载所有polyfill。

处理跨域

在src目录中，新建setupProxy.js文件，安装http-proxy-middleware，它是专门实现跨域的，webpack-dev-server的跨域原理也是基于它完成的

javascript 复制代码

yarn add http-proxy-middleware

比如以下案例：

javascript 复制代码

const { createProxyMiddleware } = require("http-proxy-middleware")
module.exports = function (app){
	app.use(
		createProxyMiddleware("jian",{
			target:"https://www.jiashu.com/asimov",
			changeOrign:true,
			ws:true,
			pathRewrite:{"^/jian":""}
		})
	)
}