feat: babel-plugin-import unsupport vant@v4 (#325)

* feat: babel-plugin-import is not supported until vant4

* feat: judge vant version

---------

Co-authored-by: zhangyuang <leonin0829@gmail.com>

Author: Ben-Ben-B

packages/plugin-react/src/tools/vite.ts

@@ -1,13 +1,13 @@
 import { build, UserConfig } from 'vite'
 import {
   loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig,
-  asyncOptimizeChunkPlugin, getOutputPublicPath, judgeAntd
+  asyncOptimizeChunkPlugin, getOutputPublicPath, getPkgMajorVersion
 } from 'ssr-common-utils'
 import react from '@vitejs/plugin-react'
 import { createStyleImportPlugin, AndDesignVueResolve, VantResolve, ElementPlusResolve, NutuiResolve, AntdResolve } from 'ssr-vite-plugin-style-import'
 const { getOutput, reactServerEntry, reactClientEntry, viteConfig, supportOptinalChaining, isDev, define, babelOptions, optimize } = loadConfig()
 const { clientOutPut, serverOutPut } = getOutput()
-const isAntd5 = judgeAntd() === 5
+const isAntd5 = getPkgMajorVersion('antd') === 5
 const extraInclude = ([] as string[]).concat(isAntd5 ? ['react-is'] : [])
 
 const styleImportConfig = {

packages/plugin-react18/src/tools/vite.ts

@@ -1,13 +1,13 @@
 import { build, UserConfig } from 'vite'
 import {
   loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig,
-  asyncOptimizeChunkPlugin, getOutputPublicPath, judgeAntd
+  asyncOptimizeChunkPlugin, getOutputPublicPath, getPkgMajorVersion
 } from 'ssr-common-utils'
 import react from '@vitejs/plugin-react'
 import { createStyleImportPlugin, AndDesignVueResolve, VantResolve, ElementPlusResolve, NutuiResolve, AntdResolve } from 'ssr-vite-plugin-style-import'
 const { getOutput, react18ServerEntry, react18ClientEntry, viteConfig, supportOptinalChaining, isDev, define, babelOptions, optimize } = loadConfig()
 const { clientOutPut, serverOutPut } = getOutput()
-const isAntd5 = judgeAntd() === 5
+const isAntd5 = getPkgMajorVersion('antd') === 5
 const extraInclude = ([] as string[]).concat(isAntd5 ? ['react-is'] : [])
 
 const styleImportConfig = {

packages/utils/src/server/judge.ts

@@ -1,7 +1,7 @@
 import { coerce } from 'semver'
 import { getPkgJson } from './cwd'
 
-export const judgeAntd = () => {
-  const antdVersion = getPkgJson().dependencies?.['antd'] ?? getPkgJson().devDependencies?.['antd']
+export const getPkgMajorVersion = (pkgName: string) => {
+  const antdVersion = getPkgJson().dependencies?.[pkgName] ?? getPkgJson().devDependencies?.[pkgName]
   return coerce(antdVersion)?.major
 }

packages/utils/src/server/webpack/common-chain.ts

@@ -7,11 +7,11 @@ import { getImageOutputPath } from '../parse'
 import { loadModuleFromFramework, judgeFramework, getCwd } from '../cwd'
 import { loadConfig } from '../loadConfig'
 import { logWarning } from '../log'
-import { judgeAntd } from '../judge'
+import { getPkgMajorVersion } from '../judge'
 import { asyncChunkMap } from '../build-utils'
 import { nameSpaceBuiltinModules } from '../static'
 
-const antdVersion = judgeAntd()
+const [antdVersion, vantVersion] = [getPkgMajorVersion('antd'), getPkgMajorVersion('vant')]
 const isAntd4 = antdVersion === 4
 if (antdVersion === 5) {
   logWarning('Check antd@5.x has been installed, antd@4.x is more recommend in ssr environment')
@@ -64,14 +64,6 @@ const addBabelLoader = (chain: Rule<Module>, envOptions: any, isServer: boolean)
           corejs: false
         }
       ],
-      [
-        loadModuleFromFramework('babel-plugin-import'),
-        {
-          libraryName: 'vant',
-          libraryDirectory: 'lib',
-          style: true
-        }, 'vant'
-      ],
       [
         loadModuleFromFramework('babel-plugin-import'),
         {
@@ -81,6 +73,18 @@ const addBabelLoader = (chain: Rule<Module>, envOptions: any, isServer: boolean)
         }, 'ant-design-vue'
       ]
     ]
+    if (vantVersion && vantVersion < 4) {
+      plugins.push(
+        [
+          loadModuleFromFramework('babel-plugin-import'),
+          {
+            libraryName: 'vant',
+            libraryDirectory: 'lib',
+            style: true
+          }, 'vant'
+        ]
+      )
+    }
     if (framework === 'ssr-plugin-vue3') {
       plugins.push(loadModuleFromFramework('@vue/babel-plugin-jsx'))
     }