這兩天在用 ant design mobile 的時候碰到個問題：元件引入失敗。

一直解決不掉，查了半天不知道是我的理解問題還是怎麼，就是找不到正確方法。（官網方法居然不行，增加學習難度啊！啊喂！~）

最後讓我找到了這麼一句：“原因： react-scripts 升級到 2.1.2 以後破壞了 react-app-rewired;然後 react-app-rewired 升級到 2.x 以後直接幹掉了所有 helpers。”

然後才注意到了這句話：
解決方法：把react-app-rewired 進行降級後可以了，即$ yarn add [email protected]

在此記錄下警示文。

具體步驟回顧（dos命令整理到了一塊）：

$ npm install -g create-react-app 
$ create-react-app my-app 
$ cd my-app 
$ npm install antd-mobile --save
$ npm install babel-plugin-import --save-dev

$ npm install react-app-rewired@2.0.2-next.0//直接安裝指定版本

$ npm install react-app-rewired --save-dev//如果你已經安裝過了
$ npm add react-app-rewired@2.0
 
.2-next.0//可以進行降級處理

然後在專案入口頁面加入以下程式碼（就是id=root 的那個頁面一般在public下的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>

package.json修改

/* 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 --env=jsdom",
      +   "test": "react-app-rewired test --env=jsdom",
}

最後在根目錄底下建立一個config-overrides.js的檔案寫上

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
      config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);
      return config;
};

然後因為改動了package.json檔案我們需要重新npm i 一下，再重啟就可以了。

最後，寫一下讓我幡然醒悟的博文：https://www.cnblogs.com/NatChen/p/10437151.html（不知道算不算原創，反正來源是這裡啦）

好了，今天的內容就到了這裡。感謝觀看。