0%

create-react-app工具两种按需引入antd组件的方式

create-react-app是react官方提供的快速搭建react项目的脚手架工具,它的安装和使用都非常方便,在命令行工具执行以下命令即可完成create-react-app的安装:

1
npm install -g create-react-app

然后执行以下命令即可创建一个react项目:

1
create-react-app helloworld

初始化后的react项目目录结构如下图所示:然后执行npm start即可启动项目。antd是一个非常好用的框架,有时我们可能会需要在使用create-react-app创建的项目中使用它,但是如果把antd全局引入了的话,打包后的体积会特别大,所以比较好的方式是按需引入项目中需要使用的组件。如何实现按需引入呢?下面我介绍两种方式,其中一种是antd官方提供的方法,另一种则是执行npm run eject后在webpack配置文件中配置按需引入。

方式一

首先安装react-app-rewired:

1
npm install --save react-app-rewired

安装完后修改package.json文件里的配置:

1
2
3
4
5
6
7
8
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}

由于我们需要按需加载组件的代码和样式,所以还需要安装babel-plugin-import插件:

1
npm install --save babel-plugin-import

然后在项目根目录创建一个 config-overrides.js 将以下内容写入这个配置文件用于修改默认配置,:

1
2
3
4
5
6
7
8
9
const { injectBabelPlugin } = require('react-app-rewired');

module.exports = function override(config, env) {
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
config,
);
return config;
};

接下来重启一下项目,即可在组件中使用以来命令按需引入antd里面的组件:

1
import { Button } from 'antd' // 引入antd的Button组件

方式二

使用create-react-app创建好项目后,我们需要先执行npm run eject以让webpack的配置文件显示出来,这个过程是不可逆的,执行这个命令后,在项目的根目录下面会多一个config文件夹,里面存放的是webpack相关的配置文件:接下来需要对webpack.config.dev.js和webpack.config.prod.js两个文件做相同的修改:一个是babel-loader中的plugins增加对atnd的支持:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// Process application JS with Babel.
// The preset includes JSX, Flow, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),

plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
},
},
},
],
['import', [{ libraryName: "antd", style: true }]] // 新添加的一行
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
// Don't waste time on Gzipping the cache
cacheCompression: false,
},
},

还有一点,同样也需要安装babel-plugin-import插件:

1
npm install --save babel-plugin-import

由于antd的样式是用less写的,所以还需要先安装less-loader,然后再修改webpack.config.dev.js和webpack.config.prod.js里的配置:

1
npm install --save less-loader

修改地方一(cssRegex):

1
2
3
4
5
// style files regexes
const cssRegex = /\.css|less$/; // 添加|less
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

修改地方二(getStyleLoaders函数):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
},
},
{
loader: require.resolve('less-loader')
}, // 增加 less 的loader
];
if (preProcessor) {
loaders.push(require.resolve(preProcessor));
}
return loaders;
};

最后可以测试一下效果,修改一下App.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React, { Component } from 'react';
import { Button } from 'antd';
import logo from './logo.svg';
import './App.css';

class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<p>
<Button type="primary">按钮</Button>
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}

export default App;

然后启动项目,可以看到效果:

  • 本文作者: 前端农民工
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!