react脚手架+antd-mobile移动端环境搭建

配置步骤

环境

1. node: v12.16.1
2. npm: 6.14.4
3. "react": "^16.13.1",
4. "react-dom": "^16.13.1",
5. "react-scripts": "3.4.1"

创建react应用

npx create-react-app my-app

然后可以用npm start直接启动项目。

安装antd-mobile

$ npm install antd-mobile --save

按照如下内容更改入口页面

引入使用

import {Button} from "antd-mobile"; 

import 'antd-mobile/dist/antd-mobile.css'; 

…… 

antd-mobile

如上使用组件要引入全部css，可以再配置一下实现按需加载，继续往下走。

安装react-app-rewired customize-cra

npm install react-app-rewired customize-cra --save-dev

根据如下文件修改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 { override, fixBabelImports } = require('customize-cra');
module.exports = override(
      fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: 'css',
      }),
);

删掉上面调用antd-mobile时调用的css

- import 'antd-mobile/dist/antd-mobile.css';

npm start启动项目，即可看到按钮具有样式了。

 

注意事项

我曾启动项目时一直报错：

Error: Cannot find module 'D:\git\my-app/config-overrides'

Require stack:

- D:\git\my-app\node_modules\react-app-rewired\config-overrides.js

- D:\git\my-app\node_modules\react-app-rewired\scripts\start.js

……

排查很久，最后把一个成功的项目里的config-overrides.js文件复制过来时发现居然没提示覆盖，仔细一看，原来的config-overrides.js文件名前面居然有个空格 ┭┮﹏┭┮，改掉后就好了~