Zenn
Closed7

create-vue と vite どちらでスキャフォルドすべきか考える

JavaScript
TypeScript
Vue.js
shingo.sasakishingo.sasaki

スキャフォルドコマンド

今回は npm + Vue 3 + TypeScript + Vite を要件と、それ以外のエコシステムの導入は不要として両ツールのスキャフォルドを試す

vite

選択肢も特になく完了

$ npm create vite vite-sample -- --template vue-ts

Scaffolding project in /Users/shingo.sasaki/vite-sample...

Done. Now run:

  cd vite-sample
  npm install
  npm run dev

create-vue

いくつかの選択肢が提示されるが、TS 以外は無効化する

$ npm init vue@3
Need to install the following packages:
  create-vue@3
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Project name: … create-vue-sample
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /Users/shingo.sasaki/create-vue-sample...

Done. Now run:

  cd create-vue-sample
  npm install
  npm run dev
shingo.sasakishingo.sasaki

デフォルトの開発環境

vite

$ npm install
$ npm run dev

シンプルなカウンターデモが用意されているだけ

create-vue

$ npm install
$ npm run dev

各種エコシステムやドキュメントへのリンクが表示されているだけ

shingo.sasakishingo.sasaki

サンプルコード

どちらも <script setup lang="ts"> で記述されているが、Reactivity Transform は設定されていない。

vite

src/components/HelloWorld.vue
<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)
</script>

create-vue

src/components/HelloWorld.vue
<script setup lang="ts">
defineProps<{
  msg: string
}>()
</script>
shingo.sasakishingo.sasaki

package.json

vite のほうはかなりシンプル。

create-vue のほうは

  • @types/node が入ってて Node 向けコード(テストとか) への配慮もある
  • npm-run-all が入ってて、型チェックとビルドを並列実行できるようになってたりする
  • 各パッケージがより新しいバージョンが入ってる

といった手厚さがある。

vite

package.json
{
  "name": "vite-sample",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "typescript": "^4.6.4",
    "vite": "^3.1.0",
    "vue-tsc": "^0.40.4"
  }
}

create-vue

package.json
{
  "name": "create-vue-sample",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview --port 4173",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit"
  },
  "dependencies": {
    "vue": "^3.2.38"
  },
  "devDependencies": {
    "@types/node": "^16.11.56",
    "@vitejs/plugin-vue": "^3.0.3",
    "@vue/tsconfig": "^0.1.3",
    "npm-run-all": "^4.1.5",
    "typescript": "~4.7.4",
    "vite": "^3.0.9",
    "vue-tsc": "^0.40.7"
  }
}
shingo.sasakishingo.sasaki

全体的に vite は必要最低限、 create-vue はオプション含めめちゃくちゃ手厚いという印象。
サクッと何かを試すときは前者でいいけど、ガッツリ Vue アプリケーションを作り込むときは後者から始めるのが良いかも？

shingo.sasakishingo.sasaki

create-vue の詳細を調べる前に先行して調べたかったテーマだったけど解決したのでOK

このスクラップは2022/09/23にクローズされました