阅读 1491

使用 Eject 方式在 create-react-app 中使用 Ant Design of React

Ant Design 官网对“如何 react-app-rewired 的方式进行按需加载”进行了说明,详见 在 create-react-app 中使用 一文,文中有这样一段话

你也可以使用 create-react-app 提供的 yarn run eject 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索,不在本文讨论范围内。

本文主要就 Eject 方式进行探索

使用 create-react-app 创建项目

参考:如何扩展 Create React App 的 Webpack 配置 的 Eject 方式

首先使用 create-react-app 创建一个项目

$ create-react-app antd-test
复制代码

创建完项目后,进入项目目录,执行 yarn run eject 或 npm run eject

$ npm run eject
复制代码

执行后会出现提示,该操作不可逆,选择 y 继续

成功 eject 后会暴露 webpack 的配置,package.json 增加了很多的依赖

安装antd

使用 cnpm 安装 antd

$ cnpm install antd
复制代码

修改 src/App.js ,引入 antd 的按钮组件。

import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;
复制代码

执行 cnpm install 安装依赖,并启动项目

$ cnpm install
$ npm start
复制代码

启动之后发现 button 并没有样式,需要引入 antd 的 css 文件

修改 src/App.css,在文件顶部引入 antd/dist/antd.css

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

...
复制代码

使用 babel-plugin-import 按需引入 antd 样式

在文件顶部引入 antd/dist/antd.css实际上加载了全部的 antd 组件的样式(对前端性能是个隐患)。 babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件(原理

$ cnpm install babel-plugin-import --save-dev
复制代码

修改 src/App.js

...
- import Button from 'antd/lib/button';
+ import { Button } from 'antd';
...
复制代码

然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css';

此时发现按钮样式不生效了,最简单的方式是修改 package.json 文件里的 babel 配置, 增加 babel-plugin-import 的配置

...
  "babel": {
    "presets": [
      "react-app"
-    ]
+    ],
+   "plugins": [
+      ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+    ]
  }
...
复制代码

重新执行 npm start,样式重新生效

至此使用 Eject 方式按需引入 antd 的方式已经探索完毕。

关注下面的标签,发现更多相似文章
评论