亚洲夜夜爱,91人人操人人摸,天天射天天日天天干,天天射天天看天天操天天,色偷偷欧美,国产精品秘麻豆,免费A级毛片无码免费120软件,免费成年人

本文適合使用Antd Design開(kāi)發(fā)項(xiàng)目的小伙伴閱讀。

歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進(jìn)階～

作者：廣東靚仔

一、背景

? ? 某天夜里，有位靚仔找到了廣東靚仔，"悄悄的"問(wèn)了個(gè)技術(shù)問(wèn)題：antd 3版本和4版本如何共存？

???沒(méi)過(guò)多久，這位靚仔找到的解決方案~

? ??

? ? 廣東靚仔回憶起之前有位同事之前也遇到這個(gè)問(wèn)題，后來(lái)同事選擇了重構(gòu)。重構(gòu)確實(shí)是最穩(wěn)的方案，保證項(xiàng)目穩(wěn)健性的同時(shí)又避開(kāi)了很多未知的坑。但是重構(gòu)要花費(fèi)更多的時(shí)間精力成本，因此還是要因項(xiàng)目組而異啦。

? ??舊項(xiàng)目想使用antd新版本組件的API，但又不想重構(gòu)，相信也有不少小伙伴有過(guò)這想法。

? ? 下面我們來(lái)具體展開(kāi)講講

二、具體的解決方案

1. 安裝? ?

? ? 安裝antd4版本的時(shí)候設(shè)置下別名，具體代碼如下：

npm?install?antd-v4@npm:[email protected]

? ??然后在package.json可以看到如下的依賴：

? ??

2.配置less-loader

webpack配置less-loader

test:?/\.less$/,
include:?[/node_modules[\\|\/]antd-v4/],
use:?[
??{
????"cache-loader",
????"style-loader",
??}
??{
????loader:?"css-loader",
????options:?{
????????importLoaders:?1
????}
??},
??{
????loader:?"less-loader",
????options:?{
??????javascriptEnabled:?true,
??????modifyVars:?{
????????"@ant-prefix":?"ant-v4",
????????"@primary-color":?"rgba(224,?61,?62,?1)",?//?全局主色
????????"@link-color":?"rgba(224,?61,?62,?1)"
??????}
????}
??}
]

3.設(shè)置prefixCls

ConfigProvider設(shè)置prefixCls

<ConfigProvider?locale={zhCN}?prefixCls="ant-v4">

4.設(shè)置語(yǔ)言地址

import?locale?from?'antd-v4/lib/locale/zh_CN'

? 然后就可以在antd3的老項(xiàng)目里面使用antd4了~

? 下面我們來(lái)梳理下這個(gè)less-loader的配置，有興趣可以繼續(xù)閱讀。

三、webpack配置less-loader說(shuō)明

? ??在上面我們添加了打包LESS的規(guī)則，我們來(lái)梳理下less-loader的配置：

include: [/node_modules[\\|\/]antd-v4/],

這里是指定node_modules路徑下的antd-v4文件需要經(jīng)過(guò) loader 處理

use

從上到下使用了cache-loader、 style-loader、?css-loader、 less-loader

?cache-loader：在一些性能開(kāi)銷較大的 loader 之前添加此 loader,以將結(jié)果緩存到磁盤里

style-loader：將打包后的css代碼

項(xiàng)目中Antd3與Antd4共存

一、背景

二、具體的解決方案