【React】脚手架进阶
暴露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":""}
})
)
}
原文地址：https://blog.csdn.net/qq_38951259/article/details/145142053
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！