兼容js代码：
在webpack的rules中增加babel处理：
module: {
unknownContextCritical: false,
rules: [
{
test: /.m?js$/,
use: {
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['@babel/preset-env']
}
}
},
需要下载的包：
"@babel/core": "^7.23.7",
"@babel/preset-env": "^7.23.8",
"babel-loader": "^9.1.3",
兼容css：
"postcss": "^7.0.39",
"postcss-preset-env": "^6",
"postcss-loader": "~3.0.0",
"autoprefixer": "^9.8.8",
增加cssloader：
{
test: /.css$/,
use: [
'style-loader',
'css-loader',
{
loader: "postcss-loader",
options: {
ident: 'postcss',
plugins: [require("postcss-preset-env"), require("autoprefixer")],
}
},
],
},
注意一些ui库会有一些低版本浏览器不兼容样式问题：
如antd5版本css大量使用了:where 语法
:where 语法的兼容在低版本浏览器比较差。需要进行处理：
import {
StyleProvider,
legacyLogicalPropertiesTransformer,
} from "@ant-design/cssinjs";
import {App } from "antd";
ReactDOM.render(
<Suspense fallback={<div></div>}>
{
<HashRouter>
<StyleProvider
hashPriority="high"
transformers={[legacyLogicalPropertiesTransformer]}
>
<App >
<RenderRouter />
</App >
</StyleProvider>
,
</HashRouter>
}
</Suspense>,
document.getElementById("root")
);
兼容css属性：
有些css属性在低版本浏览器不支持：
flex布局的间隔gap属性：
在入口处添加：
//兼容gap属性
function checkFlexGap() {
var flex = document.createElement("div");
flex.style.display = "flex";
flex.style.flexDirection = "column";
flex.style.rowGap = "1px";
flex.appendChild(document.createElement("div"));
flex.appendChild(document.createElement("div"));
document.body.appendChild(flex);
var isSupported = flex.scrollHeight === 1;
flex.parentNode.removeChild(flex);
if (!isSupported) document.body.classList.add("no-flexbox-gap");
}
checkFlexGap();
将原有gap属性的地方替换为margin：
.no-flexbox-gap .forecastItem:not(:last-child) {
margin-right: 8px;
}
.no-flexbox-gap .indexApp .topLeft span:not(:last-child) {
margin-right: 4px;
}
.no-flexbox-gap .field-item-top {
margin-bottom: 16px;
}
.no-flexbox-gap .header-pane .type-select .select-item:not(:last-child) {
margin-right: 8px;
}
兼容移动端：
ios的时间显示和安卓的有所区别：
ios只能识别/，不能识别-的时间格式
dayjs().format('YYYY/MM/DD HH:mm:ss')
