当前位置：首页 > news >正文

【React】脚手架进阶

news 来源：原创 2025/6/11 10:18:28

暴露webpack配置

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

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

执行下面命令

yarn run eject

之后会有以下的提示，表示react-scripts eject是不可逆的。
在这里插入图片描述
随后又会有其他提示：

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

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命令没有了。如下：

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

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

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

修改webpack.config.js

配置less

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

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

在这里插入图片描述

修改域名、端口号

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

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

在这里插入图片描述
如果要基于环境变量修改，则安装cross-env插件

yarn add cross-env -D

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

浏览器兼容处理

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

 "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重写)，只需要在入口文件引入：

// 对 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的跨域原理也是基于它完成的

yarn add http-proxy-middleware

比如以下案例：

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":""}}))
}

目录