瞭解antd提供的構建方式，以下將使用最基礎的webpack方式進行打包。

作者：黃明
鏈接：https://www.zhihu.com/question/45088537/answer/98388635
來源：知乎
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

沒有去了解antd提供的構建方式，以下將使用最基礎的webpack方式進行打包。

關於第一個問題：如何使用webpack進行構建操作

1.準備:
npm安裝以下組件

a.安裝react/antd:

npm install react react-dom antd --save

b.安裝webpack/less:

npm install webpack less --save-dev

webpack根據需要選擇使用-g安裝

c.安裝babel-loader以及其他相關package:

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

d.選擇安裝style-loader/css-loader

npm install style-loader css-loader --save-dev

2. 配置webpack.config.js
具體配置可以查看webpack提供的例子，主要依賴的是babel-loader
babel-loader上也有webpack.config.js應該如何編寫的例子，傳送門: babel-loader

3. 編寫我們的文件(例如: demo-antd.jsx)
<img src="https://pic2.zhimg.com/50/828231444dd7b2842b5fd77e45ed568d_hd.jpg" data-rawwidth="1148" data-rawheight="552" class="origin_image zh-lightbox-thumb" width="1148" data-original="https://pic2.zhimg.com/828231444dd7b2842b5fd77e45ed568d_r.jpg">只使用了antd提供的Button組件。
ps: 對比

import { Button } from 'antd';

和

import Button from 'antd/lib/button';

後者不會將antd中所有的內容都引入，如果你只是需要Button這麼一種組件的話，推薦使用後一種寫法。

4. 執行構建

webpack ./demo-antd.jsx demo-antd-bundle.js

將生成demo-antd-bundle.js文件

5. 在頁面中引入bundle文件(demo-antd-bundle.js)

執行到這一步，在瀏覽器中查看頁面可以應該可以看到一個原生樣式的button元素，因爲antd並沒有將樣式使用內聯style的方式寫入js文件中。

這裏我們暫時將問題一擱置，來看看問題二：組件庫的內部機制。

因爲沒有深入去看過antd的源代碼，沒法詳細說明antd的在代碼編寫上的一些....怎麼說，就是『代碼爲什麼這樣寫』這個問題，有興趣的話，可以去查看源碼，正如 @陳吉浩 所說，查看github上的代碼比npm下載後的代碼更舒服。

看一下antd的文件結構:

antd
├── CHANGELOG.md
├── LICENSE
├── README.md
├── lib // 包含所有React組件的文件夾
├── node_modules
├── package.json
└── style // 包含所有樣式組件的文件夾

antd作爲一個React組件庫，將所有的React組件都放在lib/文件夾下，在問題一第3步中使用import引入即可。
antd對於樣式的做法，是將樣式從js文件中分離出來，單獨放在style文件夾中，既然如此，我們只好查看style的文件結構

antd/style
├── README.md
├── components // 可能是我們所需要的組件樣式文件夾
├── core
├── index.less // 可能是入口文件
├── mixins
└── themes

從名字上大致猜出，components文件夾可能是我們需要使用的，我們找到樣式文件(button.less)並嘗試使用less轉換成css

lessc /path/to/antd/style/components/button.less /path/to/dest/demo-antd-style.css

(好吧，這裏其實已經回到問題一了)

以上是問題一的大致思路吧。

以下是你使用上面方法構建會遇到的一些小坑，請看完
1. 發現lessc報錯，錯誤大致上是：某些less變量在未定義的情況下被使用了。

a. 檢查入口文件style/index.less，順着入口文件稍微看下每個被import的less文件，最終找到了定義變量用的文件 style/themes/default/custom.less

b. 編寫我們的less文件(demo-antd.less)

@import "/path/to/antd/style/themes/default/custom.less";
@import "/path/to/antd/components/button.less";

c. 使用less轉換成css

lessc /path/to/demo-antd.less demo-antd-style.css

d.
在html中引入該css文件
或者
使用style-loader+css-loader，以webpack方式引入樣式文件