天天看點

通過babel-plugin-import實作Ant Design按需加載,以及執行npm run eject報錯解決

Ant Design Mobile of React按需加載,官網提供的方法:

通過babel-plugin-import實作Ant Design按需加載,以及執行npm run eject報錯解決

這裡具體介紹第一種方案:

1.安裝 babel-plugin-import:在項目跟目錄下執行以下指令

npm insatll  babel-plugin-import --save
           

2.修改配置檔案:

2.1項目根目錄下執行指令npm run eject暴露配置檔案

通過babel-plugin-import實作Ant Design按需加載,以及執行npm run eject報錯解決

注意:如果運作時報以下錯誤

通過babel-plugin-import實作Ant Design按需加載,以及執行npm run eject報錯解決

則可以先後執行以下兩條指令後,再執行npm run eject

通過babel-plugin-import實作Ant Design按需加載,以及執行npm run eject報錯解決

2.2 在package.json中找到babel的配置

通過babel-plugin-import實作Ant Design按需加載,以及執行npm run eject報錯解決

添加以下配置:

"plugins": [
  [
    "import",
    {
      "libraryName": "antd-mobile",
      "style": "css"
    }
  ]
]
           

結果:

通過babel-plugin-import實作Ant Design按需加載,以及執行npm run eject報錯解決

3.按需引入需要的元件,例如:

引入Button元件,無需單獨引入對應的css樣式

通過babel-plugin-import實作Ant Design按需加載,以及執行npm run eject報錯解決

繼續閱讀