其他分享
首页 > 其他分享> > react antd-mobile 适配移动端

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 封装组件实践,以及高阶组件的原理和使用方法。

标签:node,React,适配,require,react,antd,postcss,px
来源: https://www.cnblogs.com/monkey-K/p/16544186.html