react脚手架+antd-mobile的项目配置

项目：react脚手架创建

UI： antd-mobile

基于webpack的扩展

ps: antd官网搬运

引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra。

// 这两个是用来扩展webpak-config的

npm i react-app-rewired

npm i customize-cra

npm i babel-plugin-import

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

根目录创建conifg-overrides.js

1. antd-mobil的按需引入

// conifg-overrides.js写入

const { override, fixBabelImports} = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        libraryDirectory: 'es',
        style: 'css',
    }),
);

以上按需引入就完成了

// 移动端点击延时问题（antd-mobile有写）
// index.html加入

<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
  if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
      FastClick.attach(document.body);
    }, false);
  }
  if(!window.Promise) {
    document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
  }
</script>

2.移动适配

npm i postcss-px2rem-exclude

npm i lib-flexible

// conifg-overrides.js写入

const { override, fixBabelImports, addPostcssPlugins} = require('customize-cra');

module.exports = override(
    // antb-mobile按需引入
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        libraryDirectory: 'es',
        style: 'css',
    }),
    // postcss-px2rem-exclude---（exclude:忽略文件）
    addPostcssPlugins([require("postcss-px2rem-exclude")({ remUnit: 75, exclude: /node_modules/i })])
);

// index.js写入

import 'lib-flexible'

// public/index.html修改

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>