npm脚本运行与命令行直接输入命令的区别

从案例中寻找到答案

• 问题：

我们时常会在package.json里配置npm命令，例如："serve": "webpack-dev-server"

每当我们用命令npm run serve的时候，用的美滋滋

但是如果直接使用webpack-dev-server敲在上面的时候，有时候是不是会出现下面的图呢？

• 原因：

命令行直接输入的方式

这种方式使用必须全局安装，在全局安装了的情况下，命令行输入并敲下回车时，系统会去npm全局根路径下寻找webpack-dev-server.cmd命令（windows系统下）

npm scripts配置npm脚本运行webpack的方式

在package.json中定义了启动的npm脚本。此时系统去当前目录而非全局npm目录寻找webpack-dev-server.cmd文件并执行。

也就是你项目中的\node_modules\.bin目录下

• 先看再说：

打开webpack-dev-server.cmd

@IF EXIST // 判断驱动器、文件或文件夹是否存在（此处判断是否存在本地的node，优先取，没有则直接调全局）

%~dp0 “d”为Drive的缩写，即为驱动器，磁盘、“p”为Path缩写，即为路径，目录，作用是拿到当前目录完整的路径

@SETLOCAL 开启本地变量（笔者理解为是类似像前端的闭包，避免全局变量环境污染）

@SET PATHEXT=%PATHEXT:;.JS;=;% （设置一个PATHEXT变量）

node "%~dp0\..\webpack-dev-server\bin\webpack-dev-server.js" %*（直接执行全局配置环境的node）

对上面的不太了解，可以去打印出来看看：

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\webpack-dev-server\bin\webpack-dev-server.js" %*
  @echo off
  echo [INFO] %~dp0
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  @echo off
  echo [INFO] "%~dp0\..\webpack-dev-server\bin\webpack-dev-server.js" %*
  node  "%~dp0\..\webpack-dev-server\bin\webpack-dev-server.js" %*
)

 

• 总结:

又可以皮一下了