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

雨点打透心脏的1/2处 2021-09-17 11:44 346阅读 0赞

## 先按照官方的教程走一遍 ##

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

create-react-app antd-mobile-demo
    cd antd-mobile-demo
    
    npm install antd-mobile --save

对入口页面（index.html）进行一些有关移动端的相关配置

*  `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文件中像上面代码一样修改脚本的构建命令。

作者：Iam\_Bling  
链接：https://www.jianshu.com/p/93946e0cbc9e  
來源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。