npm run dev とnpm run serve の違い

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

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

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

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

$ 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

$ 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 に関してはこうした記載がない．

$ 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 についての定義に変えてみる．

$ 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 を実行してみる．

$ 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 のほうが動かない．

$ 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 とかコマンドの名前は何でも良い．ケチャップでも良い．

$ 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",

$ 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)

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

参考

要するに

がんばってSPA作るぞ．