created-react-app,配置Ant Design Mobile

1.Ant Design Mobile这是官方文档
https://mobile.ant.design/index-cn

 

 2安装antd-mobile

npm install antd-mobile --save

3.按需加载

 3.1引入 react-app-rewired 并修改 package.json 里的启动配置。。由于新的 react-app-rewired@2.x 版本的关系，你需要还需要安装 customize-cra。

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

3.2在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",
}

 3.3然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

3.4使用 babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

npm install babel-plugin-import --save-dev

3.5在config-overrides.js文件中放入这段代码

const { override, fixBabelImports } = require('customize-cra');
 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd-mobile',
     style: 'css',
   }),
 );

 3.6更改引用方式

import { Button } from 'antd-mobile';

 3.7重启项目

npm start

3.8缺少react-scripts插件

 3.8.1在config-overrides.js放入

const {
    override,
    fixBabelImports,
    addWebpackAlias,
    addDecoratorsLegacy,
} = require("customize-cra");
const path = require("path");
const rewirePostcss = require("react-app-rewire-postcss");
module.exports = override(
    // 配置按需加载
    fixBabelImports("import", {
        libraryName: "antd-mobile",
        style: "css",
    }),
    // 配置文件别名
    addWebpackAlias({
        "@": path.resolve(__dirname, "src"),
        "@scss": path.resolve(__dirname, "src/assets/scss"),
        "@images": path.resolve(__dirname, "src/assets/images"),
        "@views": path.resolve(__dirname, "src/views"),
        "@network": path.resolve(__dirname, "src/network"),
        "@store": path.resolve(__dirname, "src/store"),
        "@components": path.resolve(__dirname, "src/components"),
    }),
    addDecoratorsLegacy(),
    (config, env) => {
        // 重写postcss
        rewirePostcss(config, {
            plugins: () => [
                require("postcss-flexbugs-fixes"),
                require("postcss-preset-env")({
                    autoprefixer: {
                        flexbox: "no-2009",
                    },
                    stage: 3,
                }),
                require("postcss-px2rem-exclude")({
                    // 设计稿宽度/10
                    remUnit: 1080 / 10,
                    exclude: /node-modules/i,
                }),
            ],
        });
        return config;
    }
);

3.8.2报错显示react-script

1、npm i react-scripts -D
2、npm i react-app-rewire-postcss -D
3、npm start

 3.8.3报错显示px转rem有问题

 

npm i postcss-px2rem-exclude -S

4.重启项目

npm state