react使用ant-design組件庫

新建項目並引入組件

1，全局安裝腳手架

npm install -g create-react-app

2，新建項目

create-react-app reactantd

3，安裝組件

npm install antd --save

4，引入組件

在需要使用組件的頁面進行引入並使用

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

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

export default App;

組件按需加載

1，要配置組件的按需加載，需要在項目根目錄安裝react-app-rewired，用來取代react-script，在使用npm進行安裝的時候，還需要指定特定的版本，另外，還需要安裝babel進行模塊導入：

npm install react-app-rewired@2.0.2-next.0 babel-plugin-import --save

2，在項目根目錄新建文件config-overrides.js，用於在項目啟動前，先對webpack進行整合。在這個文件中，需要引入

injectBabelPlugin函數：

const { injectBabelPlugin } = require("react-app-rewired");

module.exports = function override(config, env) {
  // antd按需加載
  config = injectBabelPlugin(
    ["import", { libraryName: "antd", libraryDirectory: "es", style: "css" }],
    config
  );

  return config;
};

3，修改package.json文件中的啟動腳本：因為我們在上面是使用react-app-rewired來取代react-script，所以需要將scripts中的react-scripts全部修改為react-app-rewired：

4，在需要使用組件的地方修改引入方式，實現真正意義上的按需加載：

5，重啟服務

 代碼下載：點這里