antd mobile 项目搭建踩坑血泪史

Posted 2020-12-16 langui233

 

这两天在用 ant design mobile 的时候碰到个问题：组件引入失败。

一直解决不掉，查了半天不知道是我的理解问题还是怎么，就是找不到正确方法。（官网方法居然不行，增加学习难度啊！啊喂！~）

最后让我找到了这么一句：“原因： react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired;然后 react-app-rewired 升级到 2.x 以后直接干掉了所有 helpers。”

然后才注意到了这句话：
解决方法：把react-app-rewired 进行降级后可以了，即$ yarn add react-app-rewired@2.0.2-next.0

在此记录下警示文。

具体步骤回顾（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 （不知道算不算原创，反正来源是这里啦）

好了，今天的内容就到了这里。感谢观看。