react antd-mobile 适配移动端

2022-08-02 16:34:51 阅读：173 来源： 互联网

标签：node React 适配 require react antd postcss px

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react antd-mobile 适配移动端