Viteプロジェクトを作成する手順

// npm を使用する
npm init @vitejs/app
// 糸を使う
糸作成@vitejs/app

 
// プロジェクト名を指定して特定のフレームワークのテンプレートを使用する場合は、次のようにします // npm
vue.js のテンプレートファイル
//糸
糸作成 @vitejs/app my-vue-app --template vue

糸グローバル追加create-react-app
React アプリの作成、私のアプリ

定数 fs = require('fs')
定数パス = require('path')
const argv = require('minimist')(process.argv.slice(2))
const プロンプト = require('プロンプト')
定数{
  黄色、
  緑、
  シアン、
  青、
  マゼンタ、
  ライトレッド、
  赤
} = 'コロリスト' が必要です

// ここでは、vue と react フレームワークの設定のみを記述します。他の設定はそれほど違いはありません。興味がある場合は、ソース コードを参照してください。
const フレームワーク = [
  ......
  
  {
    名前: 'vue',
    色: 緑、
    バリエーション: [
      {
        名前: 'vue',
        表示: 'JavaScript',
        色: 黄色
      },
      {
        名前: 'vue-ts'、
        表示: 'TypeScript',
        色: 青
      }
    ]
  },
  {
    名前: 'react',
    色: シアン、
    バリエーション: [
      {
        名前: 'react',
        表示: 'JavaScript',
        色: 黄色
      },
      {
        名前: 'react-ts'、
        表示: 'TypeScript',
        色: 青
      }
    ]
  },
  
  ......
]

// 出力テンプレート名リスト const TEMPLATES = FRAMEWORKS.map(
  (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name]
).reduce((a, b) => a.concat(b), [])

const renameFiles = {
  _gitignore: '.gitignore'
}

関数コピー(src, dest) {
  定数 stat = fs.statSync(src)
  （stat.isDirectory()）の場合{
    copyDir(ソース、宛先)
  } それ以外 {
    fs.copyFileSync(ソース、宛先)
  }
}

関数 copyDir(srcDir, destDir) {
  fs.mkdirSync(destDir, { 再帰: true })
  for (const file of fs.readdirSync(srcDir)) {
    const srcFile = path.resolve(srcDir, ファイル)
    const destFile = path.resolve(destDir, ファイル)
    コピー(srcFile, destFile)
  }
}

関数emptyDir(dir) {
  fs.existsSync(dir) が存在する場合 {
    戻る
  }
  for (const file of fs.readdirSync(dir)) {
    const abs = path.resolve(dir, ファイル)
    if (fs.lstatSync(abs).isDirectory()) {
      空のディレクトリ(abs)
      fs.rmdirSync(絶対値)
    } それ以外 {
      fs.unlinkSync(abs)
    }
  }
}

targetDir = argv._[0]とします。
テンプレートをargv.templateとします || argv.t

const defaultProjectName = !targetDir ? 'vite-project' : targetDir

// コマンドラインインタラクションに関するコードはここにすべて記載されていません。興味があればソースコードを参照してください。let result = {}

結果 = プロンプトを待つ(
  [
    {
      タイプ: targetDir ? null: 'text',
      名前: 'プロジェクト名',
      メッセージ: 'プロジェクト名:',
      初期値: defaultProjectName、
      onState: (状態) =>
        (targetDir = state.value.trim() || defaultProjectName)
    },
    ......
    
  ]
）

const { フレームワーク、上書き、パッケージ名、バリアント } = 結果

定数ルート = path.join(cwd, targetDir)

if (上書き) {
  空のディレクトリ(ルート)
} そうでない場合 (!fs.existsSync(root)) {
  fs.mkdirSync(ルート)
}

テンプレート = バリアント || フレームワーク || テンプレート

// プロジェクト フォルダーのパスを出力します console.log(`\n${root} 内のスキャフォールディング プロジェクト...`)

const templateDir = path.join(__dirname, `template-${template}`)

const write = (ファイル、コンテンツ) => {
  const targetPath = renameFiles[ファイル]
    ? path.join(ルート、renameFiles[ファイル])
    : パス.join(ルート、ファイル)
  if (コンテンツ) {
    fs.writeFileSync(ターゲットパス、コンテンツ)
  } それ以外 {
      コピー(path.join(templateDir, file), targetPath)
  }
}

const ファイル = fs.readdirSync(templateDir)
for (const file of files.filter((f) => f !== 'package.json')) {
  書き込み(ファイル)
}

const pkg = require(path.join(templateDir, `package.json`))

pkg.name = パッケージ名

書き込み('package.json'、JSON.stringify(pkg、null、2))

const pkgManager = /yarn/.test(process.env.npm_execpath) ? 'yarn' : 'npm'

// プロジェクトが作成されたことを通知するプロンプトを出力し、次にプロジェクトを開始するために実行する必要があるコマンドを通知します console.log(`\n完了しました。次に実行します:\n`)
（ルート！== cwd）の場合{
console.log(` cd ${path.relative(cwd, root)}`)
}
console.log(` ${pkgManager === 'yarn' ? `yarn` : `npm install`}`)
console.log(` ${pkgManager === 'yarn' ? `yarn dev` : `npm run dev`}`)
コンソールログ()