北京网站托管的公司,城市网站建设,安卓app开发培训,网站做电话线用目录 暴露webpack配置package.json的变化修改webpack.config.js配置less修改域名、端口号浏览器兼容处理处理跨域 暴露webpack配置
react-scripts对脚手架中的打包命令进行封装#xff0c;如何暴露这些打包配置呢#xff1f;上篇写到在package.json中的scripts配置项中有eje… 目录 暴露webpack配置package.json的变化修改webpack.config.js配置less修改域名、端口号浏览器兼容处理处理跨域 暴露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-envES6转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-loader8 # 新版本的 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 PORT8080 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:}}))
}
