feat(create-rzpack): 添加打包器的选择功能

Author: renzp94

packages/create-rzpack/src/create.ts

@@ -1,4 +1,4 @@
-import fs from 'fs'
+import fs from 'node:fs'
 import {
   bold,
   fileExists,

packages/create-rzpack/src/prompts.ts

@@ -1,6 +1,6 @@
 import prompts from 'prompts'
 import { blue, bold, cyan, getFileFullPath, red, yellow } from 'rzpack-utils'
-import { CLIOptions, Template } from '.'
+import { type CLIOptions, Template } from '.'
 import { DEFAULT_CONFIG } from './constant'
 import {
   canSafelyOverwrite,
@@ -14,11 +14,17 @@ export enum JS_LINT {
   BIOME = 'biome',
 }
 
+export enum BUILDER {
+  WEBPACK = 'webpack',
+  RSPACK = 'rspack',
+}
+
 export interface PromptsResult {
   projectName?: string
   packageName?: string
   overwrite?: boolean
   template?: Template
+  builder?: BUILDER
   jtsLoader?: string
   cssScoped?: string
   jsLint?: JS_LINT
@@ -31,6 +37,7 @@ export interface PromptsResult {
 
 const getPrompts = async ({ projectName, template, force }: CLIOptions) => {
   let targetDir = projectName
+  let builder: BUILDER = BUILDER.WEBPACK
 
   let result: PromptsResult = {
     projectName,
@@ -103,8 +110,20 @@ const getPrompts = async ({ projectName, template, force }: CLIOptions) => {
         ],
       },
       {
-        name: 'jtsLoader',
+        name: 'builder',
         type: 'select',
+        message: yellow('请选择打包器'),
+        choices: [
+          { title: yellow('Webpack'), value: BUILDER.WEBPACK },
+          { title: blue('Rspack'), value: BUILDER.RSPACK },
+        ],
+        onState: (state) => {
+          builder = state.value
+        },
+      },
+      {
+        name: 'jtsLoader',
+        type: () => (builder === 'rspack' ? null : 'select'),
         message: yellow('请选择Js/Ts文件的loader'),
         hint: '用于编译时处理JSX文件',
         choices: [

packages/create-rzpack/src/render.ts

@@ -1,9 +1,9 @@
-import fs from 'fs'
-import path from 'path'
+import fs from 'node:fs'
+import path from 'node:path'
 import { pathResolve, run } from 'rzpack-utils'
 import { Template } from '.'
 import biomeVscodeSettings from '../template-biome/.vscode/settings.json'
-import { JS_LINT, PromptsResult } from './prompts'
+import { BUILDER, JS_LINT, type PromptsResult } from './prompts'
 import { deepMerge, sortDependencies } from './utils'
 
 /**
@@ -330,9 +330,23 @@ export const renderReadme = ({
  * @param {PromptsResult} result
  */
 export const renderConfig = (result: PromptsResult) => {
-  const { projectName, cssScoped, jtsLoader, template, million, imageMini } =
-    result
+  const {
+    projectName,
+    cssScoped,
+    builder,
+    jtsLoader,
+    template,
+    million,
+    imageMini,
+  } = result
   const isTsTemplate = template === Template.TS
+  let importStr = 'import { defineConfig'
+  if (jtsLoader) {
+    importStr += ', JSX_TOOLS'
+  }
+  if (builder) {
+    importStr += ', BUILDER'
+  }
 
   let assets = '  assets: {\n'
   if (cssScoped) {
@@ -351,12 +365,12 @@ export const renderConfig = (result: PromptsResult) => {
   const lessVars =
     '  lessVars: {\n' + `    file: './src/theme/globalVars.ts',\n` + '  },\n'
 
+  importStr += ` } from 'rzpack'\n\n`
   fs.writeFileSync(
     path.resolve(process.env.ROOT, 'rzpack.config.ts'),
-    `import { defineConfig${
-      jtsLoader ? ', JSX_TOOLS' : ''
-    } } from 'rzpack'\n\n` +
+    importStr +
       'export default defineConfig({\n' +
+      `  ${builder === BUILDER.RSPACK ? 'builder: BUILDER.RSPACK,\n' : ''}` +
       `${hasAssets ? assets : ''}` +
       '  html: {\n' +
       `    title: '${projectName}',\n` +