create-react-app 项目中使用Antd（按需加载 以及 less 配置）

create-react-app 项目中使用Antd（按需加载 以及 less 配置）

  大概很多一部分人在使用create-react-app 构建好的React 项目运行环境，在选择Antd 最为React组件的UI 库时，有必要对其按需加载的配置。本来对与UI 的配置来说一般不复杂，但是在这里需要一些注意的配置项，打算还会写了这么一篇文章作为记载，希望能帮助到关于此配置问题的伙计 Men.

索引：
1、create-react-app 中使用Antd 按需加载配置.

2、create-react-app 使用 Less 相关配置

1、create-react-app 中使用Antd 按需加载配置

通过Antd 官网的介绍，按需加载的方式可以有两中行为：

  第一种方法是使用 babel-plugin-import 。这是推荐使用，但是这通常需要我们弹出Webpack 配置才行，参考这一篇文章查看所有弹出的文件信息=> npm run eject 。

  第二种方法是使用 react-app-rewired，这在create-react-app 中我们无需弹出webpack 配置。

  在更多的实际应用中，为了更加灵活的管理以及配置 webpack ，一般情况会弹出配置文件的处理。如下描述使用 babel-plugin-import 按需加载配置，非常简单，只需配置.babel 文件即可：

// 1、安装 babel-plugin-import 
npm i babel-plugin-import --save-dev

// 2、.babelrc
{
    "presets": [
        "react-app"
    ],
    "plugins": [
        ["import",{
                "libraryName":"antd-mobile",
                "style": "css" // `style: true` 会加载 less 文件
            }
        ]
    ]
}

// 3、最后我们就可以按需加载Antd 组件了. 需要什么导入什么。无需单独引入样式
import { 
	Icon,
	Button 
} 
from 'antd-mobile'

2、create-react-app 使用 less 相关配置

  在create-react-app 项目中使用less 做为css 预处理的手机是很好的方式。 Antd 本身的UI 组件也有使用 less 做为编写组件样式的行为。

  但是我们在项目安装配置 less 过程中可能会出现一些问题 以及 报错信息。如下说明我们在 create-react-app 如何安装并配置 less

1、首先需要安装 less 依赖，这需要有两个依赖项：

npm i less --save-dev
npm i less-loader --save-dev

2、修改Antd 组件按需加载时 样式编译的手段：

// .babelrc
"plugins": [
    ["import",{
            "libraryName":"antd-mobile",
            "style": true // 这里改为true, 它将加载 并 处理我们的 less 
        }
    ]
]

3、修改webpack 配置，这是重要的部分。我们需要为这两个文件都进行添加配置，开发环境(dev.js) 和 生产环境(prod.js)：

// module rules . 
// 1、修改 test: /\.css$/  配置对象为：
{
	test: /\.(css|less)$/,
	...
}

// module rules . 
// 2、在 test: /\.(css|less)$/, 配置对象最后中添加 对象loader 以及 options 配置：
{
	test: /\.(css|less)$/,
	...
	{
	loader: require.resolve('less-loader'), //  compiles Less to CSS
		options:{
			javascriptEnabled:true
		}
	}
}

// module rules . 
// 修改 exclude 配置对象为如下：
{
	exclude: [
	  /\.html$/,
	  /\.(js|jsx)$/,
	  /\.(css|less)$/,
	  /\.json$/,
	  /\.bmp$/,
	  /\.gif$/,
	  /\.jpe?g$/,
	  /\.png$/,
	],
	...
}

  如上针对 less 相关配置就完成了，然后就重新启动我们的服务，就可以使用 less 作为组件样式编写的手段。
  如果还有其他问题您可以在下面评论关于遇到的信息，或者您也可以加入进来，这里不讨论如何解决程序猿单身大军的矛盾，关于任何有兴趣的 以及 需要着手解决的问题都可以提出来。欢迎加入：Q群：595377655