Viteスキャフォールド： JS と TS - (新) 檜山正幸のキマイラ飼育記メモ編

次のコマンドを実行する： npm create vite@latest 。次のオプションを選ぶ。

Vanilla, JavaScript
Vanilla, TypeScript

PowerShellのデフォルトだと、画面の文字が一部読めない。wt とか cmd.exe がいいかも。JavaScript と TypeScript の場合で比較してみる。

package.json

{
  "name": "vite-project-vanilla-js",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^3.2.0"
  }
}

{
  "name": "vite-project-vanilla-ts",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^4.6.4",
    "vite": "^3.2.0"
  }
}

違いは：

TypeScriptプロジェクトの開発ツールに typescript （そりゃそうだ）
npm run の build コマンドに "tsc &&" が先行する。つまり、ビルド時に tsc コンパイルを走らせる。
その他は特に変わりない。

ディレクトリ構造

|   .gitignore
|   package.json
|   index.html
|   counter.js *
|   main.js *
|   style.css *
|   javascript.svg *
|
\---public
        vite.svg

|   .gitignore
|   package.json
|   index.html
|   tsconfig.json
|
+---public
|       vite.svg
|
\---src
        counter.ts
        main.ts
        style.css
        typescript.svg
        vite-env.d.ts

違いは：

JavaScriptプロジェクトディレクトリ直下に平板に置かれていたソースファイル（アスタリスク付き）が、TypeScriptプロジェクトでは src に移っている。
index.html はどちらもディレクトリ直下。

tsconfig.json

TypeScriptプロジェクトでは、tsconfig.json も生成される。

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ESNext", "DOM"],
    "moduleResolution": "Node",
    "strict": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

"noEmit": true なのでトランスパイル結果は出力されない。tsc はチェック用で、変換自体は vite（から呼ばれる esbuild in Go-lang）がするのだろう。
"lib": ["ESNext", "DOM"] があるので、ライブラリのインストールが必要になるかも知れない。npm insall やれば済んでしまうだろうが。
"include": ["src"] で src/ サブディレクトリを見る設定になっている。

JavaScriptプロジェクトについて

"type" : "module" 指定があるので、すべてのjsファイルはモジュールファイルとみなされる。
サブディレクトリは不要で、すべてのファイルをフラットに置いても問題ない。
バンドラーの出力は ./dist/ の下に置かれる。
必要なツールはviteのみである。（素晴らしい！）
viteをグローバルインストールしていても問題ない。ローカル（プロジェクト内）の node_module/ は空でもよい。
が、グローバルインストールで問題が生じる可能性は残るので、ローカルインストールのほうが安全だろう。ローカルインストールは、以下のスキャフォールド終了時メッセージに従う。

Done. Now run:

  cd vite-project-XXX
  npm install
  npm run dev

NPMスクリプトコマンド：

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

vite をグローバルインストールしてあれば、npm run を省略できる。
vite で開発サーバーが上がる。
vite build でバンドラー／ビルダーが動く。
vite preview でプレビューサーバーが上がる。

TypeScriptプロジェクトについて

グローバルインストールの vite, tsc だと次のエラーが出た。

vite-project-vanilla-ts > tsc
src/main.ts:2:28 - error TS2307: Cannot find module './typescript.svg' or its corresponding type declarations.

2 import typescriptLogo from './typescript.svg'
                             ~~~~~~~~~~~~~~~~~~

viteに付属の型定義ファイルnode_modules/vite/client.d.ts を src/ にコピーすると、tsc は問題なく通るようになた。

これ以上は未調査、後日。