React scaffolding creation

UI: antd – mobile

Webpack-based extensions

Ps: ANTD official website handling

Introduce react-app-rewired and modify the startup configuration in package.json. Thanks to the new [email protected] version, you’ll also need to install customize-cra.

// 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",}Copy the code

The root directory creates conifg-overrides. Js

1. Antd-mobil’s introduction on demand

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

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

That completes the introduction on demand

// add <script SRC = to index.html"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>
Copy the code

2. Mobile adaptation

npm i postcss-px2rem-exclude

npm i lib-flexible
Copy the code
Const {override, fixBabelImports, addPostcssPlugins} = require('customize-cra'); Module. exports = override(// antb-mobile imports fixBabelImports('import', {
        libraryName: 'antd-mobile',
        libraryDirectory: 'es',
        style: 'css'}), // postcss-px2rem-exclude-- (exclude: ignore file) addPostcssPlugins([require())"postcss-px2rem-exclude")({ remUnit: 75, exclude: /node_modules/i })])
);

Copy the code
// index.js writes import'lib-flexible'

Copy the code
// public/index.html modify <meta name="viewport" content="Width = device - width, initial - scale = 1, the shrink - to - fit = no, minimum - scale = 1.0, the maximum - scale = 1.0, user - scalable = no"/>


Copy the code