npm run dev とnpm run serve の違い

Vue の勉強をしていて，参考資料によってVue.js を動かすコマンドが`npm run dev` だったり`npm run serve` だったりしたので調べました．

こちらのUdemy のコースでは`npm run serve` が使われていて，

https://www.udemy.com/share/1021GS3@SS6HrOo97M1Bwiepl4vJDW1RqfXI0ruAPFzPCUocGI6354cEsP0jkA-m9LcFSn3e/

こちらの記事では`npm run dev` が使われている．

https://qiita.com/567000/items/d6a7c694a370dc92e774

後者の記事に従って手を動かしてみると，確かに`npm run dev` は使えるけど`npm run serve` は使えない．

``` terminal
$ npm run dev

> simple-spa@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 28/31 modules 3 active ...-spa/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting                                                                 b      
 DONE  Compiled successfully in 3897ms                                3:12:43 PM

 I  Your application is running here: http://localhost:8080
```

``` terminal
$ npm run serve
npm ERR! Missing script: "serve"
npm ERR! 
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in:
npm ERR!     .../.npm/_logs/2021-12-10T06_13_49_586Z-debug-0.log

```

## 結論
プロジェクトフォルダ内の，`package.json` に`dev` と`serve` の定義がされているかいないかの違い．

`dev` が使える後者の状態で`package.json`を見てみる．

``` package.json
...
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
...
```

こんな具合に，`dev`と入力したときに実行されるコマンドが記載されている．
`serve` に関してはこうした記載がない．

``` terminal
$ cat package.json  | grep serve
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "webpack-dev-server": "^2.9.1",
```

## 検証

試しにこの状態で，`dev` についての定義を`serve` についての定義に変えてみる．

``` terminal
$ cp -a package.json package.json.bak
$ vim package.json
$ diff package.json package.json.bak 
8c8
<     "serve": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
---
>     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
```

その上で，先ほど実行できなかった`npm run serve` を実行してみる．

``` terminal
$ npm run serve

> simple-spa@1.0.0 serve
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 28/31 modules 3 active ...-spa/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting                                                                 y      
 DONE  Compiled successfully in 4822ms                                3:22:19 PM

 I  Your application is running here: http://localhost:8080
```

最初に`npm run dev` したときと同じ実行結果となった．

ちなみに`dev` の定義を`serve` に書き換えたいま，`dev` についての定義は`package.json` にはないので`npm run dev` のほうが動かない．

``` terminal
$ npm run dev
npm ERR! Missing script: "dev"
npm ERR! 
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in:
npm ERR!     .../.npm/_logs/2021-12-10T06_24_19_225Z-debug-0.log

```

`dev` とか`serve` とかコマンドの名前は何でも良い．**ケチャップでも良い．**

``` terminal
$ diff package.json package.json.bak 
8c8
<     "ketchup": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
---
>     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
```


``` terminal
$ npm run ketchup

> simple-spa@1.0.0 ketchup
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 26/31 modules 5 active ...-spa/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting                                                                 b      
 DONE  Compiled successfully in 4595ms                                3:26:42 PM

 I  Your application is running here: http://localhost:8080
 
```

## 考察

そもそもUdemy の講座とQiita の記事と，どのタイミングで`package.json` に違いが出たのか．

おそらく，プロジェクトを作成するコマンドの違いに起因．

前者では
`vue create (project-name)`

後者は
`vue init webpack (project-name)`

によってプロジェクトを作成する手順になっている．

##### 参考
https://qiita.com/teraco/items/74a6104d3e201c4f654e

## 要するに

がんばってSPA作るぞ．

![Selection.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532781/c1c794d5-c229-b25e-e3df-d3b1e536bf64.png)