feat: remove vuepress-vite and vuepress-webpack package and support -…

…-bundler option

.eslintrc.cjs

@@ -11,6 +11,26 @@ module.exports = {
       rules: {
         '@typescript-eslint/no-explicit-any': 'off',
         '@typescript-eslint/no-non-null-assertion': 'off',
+        // FIXME: Need to update eslint-config-vuepress
+        'import/no-extraneous-dependencies': [
+          'error',
+          {
+            devDependencies: [
+              '**/tests/**',
+              '**/test/**',
+              '**/__tests__/**',
+              '**/__mocks__/**',
+              '**/.vuepress/**',
+              '**/*.{test,spec}.{js.ts}',
+              '**/.commitlintrc.{js,cjs}',
+              '**/.eslintrc.{js,cjs}',
+              '**/tsup.config.{js.ts}',
+              '**/vitest.config.{js.ts}',
+              '**/vuepress.config.{js.ts}',
+            ],
+            optionalDependencies: false,
+          },
+        ],
         'vue/multi-word-component-names': 'off',
       },
     },

CONTRIBUTING.md

@@ -17,9 +17,7 @@ In the `packages` directory:
 
 Here are some wrapper packages that use the above packages:
 
-- `vuepress`: A wrapper of `vuepress-vite`.
-- `vuepress-vite`: A wrapper of `@vuepress/cli` + `@vuepress/bundler-vite`. If users want to use vite, they can simply install this package.
-- `vuepress-webpack`: A wrapper of `@vuepress/cli` + `@vuepress/bundler-webpack`. If users want to use webpack, they can simply install this package.
+- `vuepress`: A wrapper the above packages, and provides `vuepress` command line tool. Users can choose bundler by themselves.
 
 ## Development Setup
 

CONTRIBUTING_zh.md

@@ -15,11 +15,7 @@
 - `shared`: 既可以在 Node 端使用、也可以在客户端使用的工具函数模块。
 - `utils`: 仅可以在 Node 端使用的工具函数模块。
 
-还有一些对上述 Package 进行封装后的 Package ：
-
-- `vuepress`: 是 `vuepress-vite` 的封装。
-- `vuepress-vite`: 是 `@vuepress/cli` + `@vuepress/bundler-vite` 的封装。如果用户想使用 Vite ，仅安装这个 Package 就可以了。
-- `vuepress-webpack`: 是 `@vuepress/cli` + `@vuepress/bundler-webpack` 的封装。如果用户想使用 Webpack ，仅安装这个 Package 就可以了。
+- `vuepress`: 上述包的封装，提供了 `vuepress` 命令行工具并允许用户自选 Bundler。
 
 ## 开发配置
 

packages/cli/package.json

@@ -47,6 +47,18 @@
   "devDependencies": {
     "@types/envinfo": "^7.8.3"
   },
+  "peerDependencies": {
+    "@vuepress/bundler-vite": "workspace:*",
+    "@vuepress/bundler-webpack": "workspace:*"
+  },
+  "peerDependenciesMeta": {
+    "@vuepress/bundler-vite": {
+      "optional": true
+    },
+    "@vuepress/bundler-webpack": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

packages/cli/src/cli.ts

@@ -25,6 +25,7 @@ export const cli = (defaultAppConfig: Partial<AppConfig> = {}): void => {
   // register `dev` command
   program
     .command('dev [sourceDir]', 'Start development server')
+    .option('-b, --bundler <bundler>', 'Set bundler to use')
     .option('-c, --config <config>', 'Set path to config file')
     .option('-p, --port <port>', 'Use specified port (default: 8080)')
     .option('-t, --temp <temp>', 'Set the directory of the temporary files')

packages/cli/src/commands/build/createBuild.ts

@@ -26,7 +26,7 @@ export const createBuild =
     }
 
     // resolve app config from cli options
-    const cliAppConfig = resolveCliAppConfig(sourceDir, commandOptions)
+    const cliAppConfig = await resolveCliAppConfig(sourceDir, commandOptions)
 
     // resolve user config file
     const userConfigPath = commandOptions.config

packages/cli/src/commands/build/types.ts

@@ -20,4 +20,5 @@ export interface BuildCommandOptions {
   config?: string
   cleanTemp?: boolean
   cleanCache?: boolean
+  bundler?: 'vite' | 'webpack'
 }

packages/cli/src/commands/dev/createDev.ts

@@ -29,7 +29,7 @@ export const createDev = (defaultAppConfig: Partial<AppConfig>): DevCommand => {
     }
 
     // resolve app config from cli options
-    const cliAppConfig = resolveCliAppConfig(sourceDir, commandOptions)
+    const cliAppConfig = await resolveCliAppConfig(sourceDir, commandOptions)
 
     // resolve user config file
     const userConfigPath = commandOptions.config

packages/cli/src/commands/dev/types.ts

@@ -23,4 +23,5 @@ export interface DevCommandOptions {
   cleanTemp?: boolean
   cleanCache?: boolean
   watch?: boolean
+  bundler?: 'vite' | 'webpack'
 }

packages/cli/src/commands/info.ts

@@ -40,8 +40,6 @@ export const info = async (): Promise<void> => {
         '@vuepress/theme-default',
         '@vuepress/utils',
         'vuepress',
-        'vuepress-vite',
-        'vuepress-webpack',
         'vue',
         'vue-router',
         'vue-loader',

packages/cli/src/config/resolveAppConfig.ts

@@ -20,7 +20,7 @@ export const resolveAppConfig = ({
 }): AppConfig | null => {
   const appConfig = {
     // allow setting default app config via `cli()`
-    // for example, set different default bundler in `vuepress` and `vuepress-vite` package
+    // for example, set different default bundler in wrapper bins
     ...defaultAppConfig,
     // use cli options to override config file
     ...userConfig,

packages/cli/src/config/resolveBundler.ts

@@ -0,0 +1,60 @@
+import type { Bundler } from '@vuepress/core'
+import { colors, logger } from '@vuepress/utils'
+
+export const resolveBundler = async (
+  bundler: 'vite' | 'webpack' | undefined,
+): Promise<Bundler> => {
+  if (bundler === 'vite') {
+    try {
+      const { viteBundler } = await import('@vuepress/bundler-vite')
+
+      return viteBundler()
+    } catch (e) {
+      logger.error(
+        `You need to install dependency ${colors.magenta(
+          '@vuepress/bundler-vite',
+        )} to use vite bundler.`,
+      )
+
+      throw e
+    }
+  }
+
+  if (bundler === 'webpack') {
+    try {
+      const { webpackBundler } = await import('@vuepress/bundler-webpack')
+
+      return webpackBundler()
+    } catch (e) {
+      logger.error(
+        `You need to install dependency ${colors.magenta(
+          '@vuepress/bundler-webpack',
+        )} to use webpack bundler.`,
+      )
+
+      throw e
+    }
+  }
+
+  if (bundler) throw new Error(`Unsupported bundler: ${bundler}`)
+
+  try {
+    const { viteBundler } = await import('@vuepress/bundler-vite')
+
+    return viteBundler()
+  } catch (e) {
+    try {
+      const { webpackBundler } = await import('@vuepress/bundler-webpack')
+
+      return webpackBundler()
+    } catch (e) {
+      logger.error(
+        `You need to install a bundler, choose from ${colors.magenta(
+          '@vuepress/bundler-vite',
+        )} and ${colors.magenta('@vuepress/bundler-webpack')}.`,
+      )
+
+      throw e
+    }
+  }
+}

packages/cli/src/config/resolveCliAppConfig.ts

@@ -1,18 +1,21 @@
 import process from 'node:process'
 import type { AppConfig } from '@vuepress/core'
 import { path } from '@vuepress/utils'
+import { resolveBundler } from './resolveBundler'
 
 const OPTIONS_COMMON = ['debug', 'open', 'port', 'host'] as const
 const OPTIONS_DIRECTORY = ['cache', 'dest', 'temp'] as const
 
 /**
  * Resolve app config according to command options of cli
  */
-export const resolveCliAppConfig = (
+export const resolveCliAppConfig = async (
   sourceDir: string,
-  commandOptions: Partial<AppConfig>,
+  commandOptions: Omit<Partial<AppConfig>, 'bundler'> & {
+    bundler?: 'vite' | 'webpack'
+  },
   cwd = process.cwd(),
-): Partial<AppConfig> & Pick<AppConfig, 'source'> => {
+): Promise<Partial<AppConfig> & Pick<AppConfig, 'source'>> => {
   // resolve the source directory
   const source = path.resolve(cwd, sourceDir)
 
@@ -34,5 +37,8 @@ export const resolveCliAppConfig = (
     }
   })
 
+  // set bundler
+  appConfig.bundler = await resolveBundler(commandOptions.bundler)
+
   return appConfig
 }