create-react-app中安装使用antd-mobile

先按照官方的教程走一遍

用create-react-app创建一个项目，引入antd-mobile

create-react-app antd-mobile-demo
cd antd-mobile-demo

npm install antd-mobile --save

对入口页面（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>

• fastclick.js是解决移动端300ms延迟的方案。

• 有些浏览器不支持promise，需要引入es6-promise支持

这里还强烈推荐使用按需加载（仅加载引用的组件），但是手动使用按需加载的话，很麻烦

import DatePicker from 'antd-mobile/lib/date-picker';  // 加载 JS
import 'antd-mobile/lib/date-picker/style/css';        // 加载 CSS

推荐使用babel-plugin-import插件。配置完之后babel-plugin-import会帮你自动加载js和css。

npm i --save babel-plugin-import

还需要安装一个可以自定义配置webpack的插件，具体讲解请看下面。

npm i react-app-rewired --save-dev

安装了之后，修改package.js文件，如下

"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文件，顾名思义就是重写配置的意思。把babel-plugin-import插件引入。

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

引用的时候直接引入要用的模块即可：

import {DatePicker, Button} from 'antd-mobile';
<Button type="primary">按钮</Button>

如果不使用react-app-rewired插件重新配置webpack，也可以在根目录新建.babelrc文件添加babel-plugin-import插件配置。

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd-mobile",
        "style": "css"
      }
    ]
  ]
}

启动时提示找不到模块

原因暂时未知，不过我们只需要根据提示再次安装缺少的模块就可以了

npm i react-script --save
npm i react --save
npm i react-dom --save

react-app-rewired自定义webpack配置详解

---

使用create-react-app脚手架创建的项目，把webpack的配置文件都封装隐藏了起来，让使用者不用关心这些配置，从而降低工具的使用难度。但是作为开发者有时候需要对webpack自定义一些配置。

在package.json中有这样一条命令

"scripts": {
    "eject": "react-scripts eject"
}

执行

yarn run eject

就会把webpack配置文件反编译的项目中，然开发者可见，这时就可以根据自身情况进行自定义配置。但是缺点就是react-scripts这个包已经以文件的形式存在了，所以没法体会包升级带来的好处了。

这时就有了react-app-rewired插件来解决这个问题，通过创建一个config-overrides.js 文件来对 webpack 配置进行扩展。就像上面代码写的那样：
override方法的第一个参数config就是webpack的配置，然后在方法中对配置进行扩展（比如安装其他 loader 或者 plugins），最后再把config对象返回去。

config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);

配置完成之后，到package.json文件中像上面代码一样修改脚本的构建命令。