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

清秋發表於2018-07-28
ReactAPP

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 方式在 create-react-app 中使用 Ant Design of React

成功 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 的方式已經探索完畢。

相關文章