react antd-mobile 适配移动端
1. react antd-mobile 适配移动端
参考：https://www.jb51.net/article/215386.htm
1.报错：Error: require postcss-flexbugs-fixes use postcss 8
原因：postcss-flexbugs-fixes 版本太高
解决：npm i postcss-flexbugs-fixes@3.2.0 -S
2.报错：plugin is not a funtion
原因：postcss-preset-env 版本太高
解决：npm i postcss-preset-env@5.3.0 -S
2. react 支持 sass, 但是要手动下载一个 node-sass
3. H5适配，排除 node_modules 下的文件不转 rem
npm i postcss-plugin-px2rem lib-flexible --save
1. 在入口引入 import 'lib-flexible'
2. webpack 配置中修改 postCss 的plugins
rewirePostcss(config, {
plugins: () => [
require("postcss-flexbugs-fixes"),
require("postcss-preset-env")({
autoprefixer: {
flexbox: "no-2009",
},
stage: 3,
}),
require("postcss-plugin-px2rem")({
// 设计稿宽度/10
// remUnit: 100,
// exclude: /node_modules/,
// rootValue: 100,
// propList: ['*'],
// exclude: /node_modules|folder_name/i // 忽略node_modules⽬录下的⽂件
rootValue: 75, // 换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
// unitPrecision: 5, //允许REM单位增长到的十进制数字。
// propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
// propBlackList: [], //黑名单
exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
// selectorBlackList: [], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
}),
],
});
4. 完整的H5端customize-cra 重写 webpack配置
const {
override,
fixBabelImports,
addWebpackAlias,
addDecoratorsLegacy,
addWebpackExternals,
addWebpackPlugin,
addPostcssPlugins,
overrideDevServer,
adjustWorkbox,
watchAll,
disableEsLint
} = require("customize-cra");
const path = require("path");
const rewirePostcss = require("react-app-rewire-postcss");
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
const { paths } = require("react-app-rewired");
const analyze = process.env.NODE_ENV === 'development' //是否分析打包数据
const externals = process.env.NODE_ENV === 'production' //是否使用cdn
module.exports = {
webpack: override(
disableEsLint(),
// 配置按需加载 antd-mobile5 版本后不需要配置了，本身支持按需导入
// fixBabelImports("import", {
// libraryName: "antd-mobile",
// libraryDirectory: 'es',
// style: "css"
// }),
// 配置文件别名
addWebpackAlias({
"@": path.resolve(__dirname, "src"),
"@css": path.resolve(__dirname, "src/assets/css"),
"@js": path.resolve(__dirname, "src/assets/js"),
"@images": path.resolve(__dirname, "src/assets/images"),
"@store": path.resolve(__dirname, "src/store"),
"@components": path.resolve(__dirname, "src/components"),
}),
// 允许使用装饰器
addDecoratorsLegacy(),
//输出静态报告文件report.html，而不是启动一个web服务
// analyze ? addWebpackPlugin(new BundleAnalyzerPlugin({
// analyzerMode: 'static',
// })): undefined,
// 第三方资源抽离，不打包
externals ? addWebpackExternals({
"react": "React",
"react-dom": "ReactDom"
}) : undefined,
// addPostcssPlugins(
// [
// require("postcss-flexbugs-fixes"),
// require("postcss-preset-env")({
// autoprefixer: {
// flexbox: "no-2009",
// },
// stage: 3,
// }),
// require("postcss-px2rem-exclude")({
// // 设计稿宽度/10
// // remUnit: 100,
// exclude: /node_modules/i,
// rootValue: 100,
// propList: ['*'],
// // exclude: /node_modules|folder_name/i // 忽略node_modules⽬录下的⽂件
// }),
// ]
// ),
(config, env) => {
// 重写postcss
rewirePostcss(config, {
plugins: () => [
require("postcss-flexbugs-fixes"),
require("postcss-preset-env")({
autoprefixer: {
flexbox: "no-2009",
},
stage: 3,
}),
require("postcss-plugin-px2rem")({
// 设计稿宽度/10
// remUnit: 100,
// exclude: /node_modules/,
// rootValue: 100,
// propList: ['*'],
// exclude: /node_modules|folder_name/i // 忽略node_modules⽬录下的⽂件
rootValue: 75, // 换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
// unitPrecision: 5, //允许REM单位增长到的十进制数字。
// propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
// propBlackList: [], //黑名单
exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
// selectorBlackList: [], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
}),
],
});
// cdn 配置
externals && Object.assign(config.plugins[0].userOptions, {
cdn: {
js: [
'https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js',
'https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js',
],
css: []
}
})
// console.log(config);
return config;
}
),
// devServer: overrideDevServer(
// // dev server plugin
// watchAll()
// )
}
5.
过cmd命令taskkill /IM nginx.exe /F 去关闭所有nginx进程
npm view antd versions
---------------------------------------------------------------------------------
1 jsx 到 fiber 的转换流程，以及如何操纵 React element 元素。
2 React 核心基础模块的原理、使用以及进阶，比如 state、props、ref、context 等。
3 所有常用 React Hooks 的原理，以及合理使用、编写自定义 Hook 的方法。
4 如何在 React 应用中进行 CSS 模块化。
5 控制 React 渲染的方法，以及性能优化手段。
6 生态 React Router、React Redux、React Mobx 的详细解读。
7 React 应用中海量数据的处理方案。
8 React 封装组件实践，以及高阶组件的原理和使用方法。
