前端面试之输入npm run后执行原理

引言

在前端开发的工作当中，使用 npm run dev 的命令启动本地开发环境，是再正常不过的事了。那么，当输入完类似 npm run xxx 的命令后，究竟是如何触发各种构建工具的构建命令以及启动 Node 服务等功能的呢？

首先我们知道，Node 作为 JavaScript 的运行时，可以把 .js 文件当做脚本来运行，像这种：

node index.js

当我们使用 npm 来管理项目（或者 yarn）时，会在根目录下生成一个 package.json 文件，其中的 scripts 属性，就是用于配置 npm run xxx 命令的，比如我有如下配置：

// package.json
{
  // ...
  "scripts": {
    "start": "node ./src/index.js",
    "build": "react-scripts build",
  },
  // ...
}

当执行 npm start 时，对于 npm 来说，相当于执行 npm run start ，则映射为 scripts 属性下的 start 命令，即

npm start
# 相当于
npm run start
# 相当于
node ./src/index.js

这个比较好理解，就是直接使用全局安装的 Node 命令来执行了 ./src 目录下的 index.js 文件而已。

如上面类似，执行 npm run build 即相当于执行 react-scripts build 命令。这个命令，是使用 create-react-app 搭建 React 项目时默认配置的。与 Node 不同，react-scripts 并没有全局安装，怎么就能直接执行呢？

这时我们不妨看一下，使用 create-react-app 搭建的项目（使用 vue-cli 搭建的项目也一样），在 npm install 后，其 node_modules 目录下面的样子：

如图可以看到有一个 .bin 目录，这个目录不是任何一个 npm 包。目录下的文件，右面都有一个小箭头（VS Code 上这样显示），表示这是一个软链接，打开文件可以看到文件顶部写着 #!/user/bin/env node ，表示这是一个通过使用 Node 执行的脚本。

由此我们可以知道，当使用 npm run build 执行 react-scripts build 时，虽然没有安装 react-scripts 的全局命令，但是 npm 会到 ./node_modules/.bin 中找到 react-scripts.js 文件作为 Node 脚本来执行，则相当于执行了 ./node_modules/.bin/react-scripts build（最后的 build 作为参数传入）。

npm run build
# 相当于
./node_modules/.bin/react-scripts build

前面说过，react-scripts 是一个软链接，那么它的指向是哪里，又是怎么来的呢？

我们可以在 node_modules 目录下，直接找到 react-scripts 包，查看其目录结构和 package.json 如下：

从 package.json 中可知，这个包将 ./bin/react-scripts.js 作为 bin 声明了。所以在 npm install 时，npm 读到该配置后，就将该文件软链接到 ./node_modules/.bin 目录下，而 npm 还会自动把node_modules/.bin加入$PATH，这样就可以直接作为命令运行依赖程序和开发依赖程序，不用全局安装了。

假如我们在安装包时，使用 npm install -g xxx 来安装，那么会将其中的 bin 文件加入到全局，比如 create-react-app 和 vue-cli ，在全局安装后，就可以直接使用如 vue-cli projectName 这样的命令来创建项目了。

以上就是前端面试之输入npm run后执行原理的详细内容，更多关于npm run执行原理的资料请关注Devmax其它相关文章！