實現Ant Design按需載入

2022-05-03 12:09:16 字數 882 閱讀 3840

安裝babel-plugin-import:

然後在.babelrc中新增如下**:

] // `style: true` 會載入 less 檔案

]}babelrc配置完之後,把專案跑起來發現並不起作用,元件樣式並沒有加上。

這裡其實錯的不是我們,也不是antd,而是這個腳手架它預設是不使用.babelrc的,它使用的是package.json中的babel配置和內部配置。

所以我們要將腳手架的內部配置項暴露出來進行修改,使用 npm run eject這個命令來暴露配置,執行npm run eject之後,專案根目錄會生成config資料夾。

找到config/webpack.config.js檔案,將babelrc:false改為true,意思是啟用.babelrc的配置:

test: /\.(js|mjs|jsx|ts|tsx)$/,

loader: require.resolve('babel-loader'),

options: ,

},},

],],

// this is a feature of `babel-loader` for webpack (not babel itself).

// it enables caching results in ./node_modules/.cache/babel-loader/

// directory for faster rebuilds.

cachedirectory: true,

// see #6846 for context on why cachecompression is disabled

cachecompression: false,

compact: isenvproduction,},}

antd實現按需載入

在使用react開發專案,使用第三方ui庫antd時,引入antd檔案,每次載入時,把一些不需要的也載入上了,這是沒有必要的,所以就需要配置一下antd檔案,是她能夠按照需要引入對應的檔案,寫次文章,作為記錄,方便日後自己再次使用方便。第一步 自定義配置 第二步 配置json檔案 package.j...

Vant按需載入

librarydirectory 複製 按需引入vant元件 import from vant 複製 使用vant元件 vue.use datetimepicker use button use list 複製 type primary 按鈕複製 複製 ps 出來vant庫外,像antiui ele...

antd按需載入

antd 是螞蟻金服推出的一套非常好的react ui庫,使用起來特別方便,而且也推出了antd手機端庫,同時還推出了vue的使用方式 import react from react import from antd import antd dist antd.css return 按鈕 在antd...