关于react-cli的antd的按需加载的两种方式;

xiaoxiao2021-03-01  25

按需加载是bable-plugin-import去实现的

首先安装  yarn add bable-plugin-import;

 

一种是 package.json 里面去配置; 前面有一篇已经写过;

https://blog.csdn.net/wangrong111222/article/details/80766773

还有一种是在webpack 配置文件里里面去配;

eject 暴露出来 

// Process JS with Babel. { test: /\.(js|jsx|mjs)$/, include: paths.appSrc, loader: require.resolve('babel-loader'), options: { plugins:[['import',{ "libraryName":"antd", "style":true }]], // 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, }, },

这种js 的配置有俩  注意: 是 处理 babel那个 ;别找错了;

把 plugins 加入 options里就完事了;

把这玩意给dev 和prod 各一份 ;

对了  less 版本要降到 2.7.3 否则 就报错 ;

 

如果没有eject 暴露 配置项的话那么引入js 去实现  ,antd 官网上有 ,和less 版本也兼容 

安装react-app-rewired 包;

新建   config-overrides.js

写入 

+ const { injectBabelPlugin } = require('react-app-rewired'); module.exports = function override(config, env) { + config = injectBabelPlugin( + ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], + config, + ); return config; };

然后 就可以用了

 

 

 

 

 

 

 

 

转载请注明原文地址: https://www.6miu.com/read-3450096.html

最新回复(0)