npm run dev和npm run serve

Survive by day and develop by night.
talk for import biz , show your perfect code,full busy，skip hardness,make a better result,wait for change,challenge Survive.
happy for hardess to solve denpendies.

目录

概述

npm run dev和npm run serve的是一个非常常见的需求。

需求：

npm实际上是nodejs官方提供的包管理平台，npm提供了一个命令行工具npm-cli，在我们使用npm这个命令时，我们实际是通过node运行一个名为npm-cli.js的脚本

设计思路

实现思路分析

1.npm install命令

在构建项目时，通过npm install命令，会在项目目录下生成一个名为node_modules的文件夹

2.package.json

在package.json文件中，有一个scripts的字段

// 运行npm run serve的scripts字段
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
1
2
3
4
5
6

//运行npm run dev的scripts字段
"scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "webpack": "webpack --version"
  },
1
2
3
4
5
6
7

3.npm run serve

npm run serve的时候是运行vue-cli-service serv
node_modules文件夹的.bin文件

然不能直接运行vue-cli-service，但是我们在npm run的时候，会前往node_modules/.bin下找到vue-cli-service文件，然后将该文件作为脚本运行。

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case `uname` in
    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac

if [ -x "$basedir/node" ]; then
  "$basedir/node"  "$basedir/../@vue/cli-service/bin/vue-cli-service.js" "$@"
  ret=$?
else 
  node  "$basedir/../@vue/cli-service/bin/vue-cli-service.js" "$@"
  ret=$?
fi
exit $ret

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
)
1
2
3
4
5
6
7

参考资料和推荐阅读

[1]. https://juejin.cn/post/7139045537864482853

欢迎阅读，各位老铁，如果对你有帮助，点个赞加个关注呗！~