create-react-app集成antd-mobile，customize-cra扩展配置addLessLoader，lessOptions,fixBabelImports，实现主题定制和按需加载

项目目标是做一款小程序 实现房间预订、在线点单、会员卡券积分管理的功能，并且同步实现一套H5版。

没错，最佳实现方案是uni-app或者taro。听之前同事说uni-app坑多（高手勿喷，本人小白，没学过uni，不了解，仅仅听别人说，勿骂），另外最近taro比较活跃，并且可以使用react语法开发（也支持了最新的vue3）,果断放弃uni-app,决定使用taro做个demo尝试了一下觉得还不错,只可惜taro3.x版本只有v3.0.0-alpha.3，出于好奇的还是尝试了下，切了个页面发现flex布局在web和小程序上表现不一致，样式有些许差别，怕到了生产兜不住，另外由于时间、技术等等各方面综合考虑决定还是使用自己熟悉的技术栈进行开发，接着就有了后面的故事。

小程序：使用vant-weapp作为ui框架，没什么好说的。

H5版：工作中一直用的umi和dva,基础框架有些生疏了，决定使用create-react-app 作为搭建，来帮自己熟悉下基础知识。集成 react-redux + redux + redux-thunk + react-router-dom + antd-mobile 实现主题定制、按需加载。

说了这么多废话，下边开始搭建吧：

npx create-react-app my-app
cd my-app
// 执行npm start 项目可以正常启动 代表成功
//开始安装所需要的包
npm i redux redux-thunk react-redux --S
npm i react-router-dom --S
npm i axios --S
npm i less lessLoader --S
npm i antd-mobile --S

//因为 npm run eject是不可逆的，可以使用customize-cra进行扩展配置
npm i react-app-rewired customize-cra --D

以上安装完之后，在根目录创建 config-overrides.js,如下：

const { addLessLoader,addDecoratorLegacy,override  }  = require("customize-cra");
const 
module.export = override(
    addLessLoader(),//支持less文件
    addDecoratorLegacy(),//支持修饰器写法
)

更改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",
}

配置antd-mobile 按需加载

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

npm i babel-plugin-import --D

2. 配置babel-plugin-import

config-overrides.js文件
const {fixBabelImports,override} = require("customize-cra")

module.export = override(
    fixBabelImports("import",{
        "libraryName":"antd-mobile",
        "style":"css",
    })
)

3.接下来尝试一下使用Button组件，

import { Button } from 'antd-mobile';
export default function Btn(){
    return <Button type="primary">按钮</Button>
}

漂亮的button已经躺在手机里任你玩耍了。

接下来定制主题，让她穿上你喜欢的内衣:

方案一：用 less 文件进行变量覆盖。建立一个单独的 less 文件如下，再引入这个文件。

@import "~antd-mobile/dist/antd-mobile.less";   // 引入官方提供的 less 样式入口文件
@import "your-theme-file.less";   // 用于覆盖上面定义的变量

注意：这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 babel-plugin-import 的 style 属性一起使用。

方案二：在package.json中添加 theme,全部主题样式参考这里

 {
      ...
      "theme": {
          "brand-primary": "red",
          "color-text-base":  "#333",
          ...
      },
      ...
  }

接下来配置config-overrides.js

const { addDecoratorLegacy,override,addLessLoader,fixBabelImports } = require("customize-cra");
const theme = require("package.json").theme;

module.export = override(
    addDecoratorLegacy(),
    addLessLoader({
        lessOptions:{
            javascriptEnabled:true,
            modifyVars:theme
        }
    }),//注意更早的版本 使用 addLessLoader({modifyVars:theme}) 配置
    fixBabelImports("import",{
        "libraryName":"antd-mobile",
        "style":true
    })
)

重启项目，发现type=primary的button组件，背景色已经由蓝色变成了红色。

如有错误，欢迎指出，指出必更正。大家一起进步，谢谢。