create-react-app項目中引入antd

create-react-app方式下引入antd

由於create-react-app構建React App的方式推薦zero-configuration（零配置），所以只能通過 npm run eject的方式來講所有的配置項暴露出來。要注意的eject操作是不可逆轉的。

進入 項目根目錄 安裝antd npm install antd --save

安裝完 antd, 默認所有的組件都會被引入，那項目將會變得很龐大，antd提供了按需加載的方式

步驟

1. 安裝babel-plugin-import
   npm install babel-plugin-import --save-dev
2. 暴露配置項
   npm run eject
3. 配置按需加載
   • 暴露配置項之後，會生成一個config的文件夾，首先我們先配置dev模式。prod模式與dev模式的配置相同。
   • 打開webpack.config.dev.js文件
     

• ** 即添加以下代碼 **

   plugins: ['transform-runtime', ['import', {
      libraryName: 'antd',
      style: 'css'
    }]]

4. 運行項目npm start