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"/>


複製代碼