前端面试之输入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执行原理的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue打包npm run build时候界面报错的解决

    用coding-pages打开后显示Failed to load resource: the server responded with a status of 404 (Not Found), 解决方案: 方案一: 找到config里的index.js,打开修改assetsPublicPath 为"./" 方案二: 或者把index.html文件中的路径/去掉: 下面是去掉后的,可以参考下 成功了! 补充知识:启动vue项目 npm run dev 时报errno -4058 进入到

  • vue 动态设置img的src地址无效,npm run build 后找不到文件的解决

    动态设置img的src属性无效,而直接写可以 解决办法: imgSrc写成require('path'): 原因: 动态添加src被当做静态资源处理了,没有进行编译 npm run build 后出现 xxxxxxx net::ERR_FILE_NOT_FOUND 解决办法: 进入:build文件夹 > 打开 webpack.prod.conf.js 找到:output 对象 添加:publicPath:'./' 具体写法: publicPath: process.env.NODE_ENV ==

  • 解决vue打包 npm run build-test突然不动了的问题

    今天遇到一件很奇葩的事情 输入npm run build-test 突然停在这不动了 what? 不动了?! 后来google了一下 大家都是人才 运行一下这句话 就动了!! npm config set registry http://registry.cnpmjs.org 补充知识:vue_test_unit_e2e常见问题npm run unit单元测试和npm run e2e集成测试问题 vue项目要进行unit和e2e常见问题 localStorage is not available

  • 解决vue项目运行npm run serve报错的问题

    先来一张报错的截图 先去配置环境变量 C:\Users\lgd\AppData\Local\Programs\Microsoft VS Code\bin的后面配置 :%SystemRoot%\system32;一定要注意分号, 然后在path环境中配置C:\Windows\System32 最后去项目安装依赖 npm i 运行项目 npm run serve 如果这样子项目还是报同样的错误,那么就把node全局卸载,去控制面板卸载,然后安装,最后安装依赖,运行项目就可以成功了 补充知识:vue

  • 解决vue项目,npm run build后,报路径错的问题

    在build目录下的webpack.prod.conf.js里面: output: { path: config.build.assetsRoot, publicPath: "/dist/", // 添加这行代码,可解决该问题或者publicPath: "./",也可解决 filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[

  • 前端面试运行npm run xxx发生过程原理解析

    前端面试运行npm run xxx发生过程原理解析

    目录 引言 package.json文件 总结 引言 事情是这样的,直接开讲 面试官:npm run xxx的时候,发生了什么?讲的越详细越好. 我(心想,简单啊): 首先,DNS 解析,将域名解析成 IP 地址,然后TCP 连接,TCP 三次握手… 面试官:停停,我问的不是从URL输入到页面展现到底发生什么?,是npm run xxx的时候,发生了什么. 我(尴尬,条件反射地以为是问的八股文):emmmm,我记得 npm run xxx的时候,首先会去项目的package.json文件里找sc

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

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

    目录 引言 引言 在前端开发的工作当中,使用 npm run dev 的命令启动本地开发环境,是再正常不过的事了.那么,当输入完类似 npm run xxx 的命令后,究竟是如何触发各种构建工具的构建命令以及启动 Node 服务等功能的呢? 首先我们知道,Node 作为 JavaScript 的运行时,可以把 .js 文件当做脚本来运行,像这种: node index.js 当我们使用 npm 来管理项目(或者 yarn)时,会在根目录下生成一个 package.json 文件,其中的 scri

  • 输入npm run xxx后执行原理深入解析

    输入npm run xxx后执行原理深入解析

    目录 前言 总结 前言 当我们输入npm run XXX会首先去package.json文件里找scripts 里找对应的xxx,然后执行 xxx的命令,例如我下面这个项目输入npm run dev就会执行vue-cli-service serve 这条命令. package.json文件 那么问题来了: 为什么不直接执行vue-cli-service serve而要执行npm run serve 呢? 因为 直接执行vue-cli-service serve,会报错,因为操作系统中没有存在vu

  • npm run dev失败的简单解决办法

    npm run dev失败的简单解决办法

    目录 记录学习TS和Vue过程中遇到的问题及解决办法 解决办法: 总结 记录学习TS和Vue过程中遇到的问题及解决办法 下载好相关依赖包后,每次npm run dev时,都会出现以下问题: 输入yes进行下载,但是不会下载成功.输入NO则会直接结束,不会执行. 于是我根据yes之后的报错信息,去到log里面查看 嗯,看了半天没看懂! 于是我就查看依赖包的版本号是否有问题,版本号如下: 于是根据版本号再到处收集相关信息,终于找到问题了! 我们报错的提示是webpack-cli这个包出现了问题,问你

  • 关于vue的npm run dev和npm run build的区别介绍

    关于vue的npm run dev和npm run build的区别介绍,下面就分享给大家,具体如下: ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-server.js │ ├─utils.js │ ├─vue-loader.conf.js │ ├─webpack.base.conf.js │ ├─webpack.dev.conf.js │ ├─webpack.prod.conf.js │ └─webpa

  • 基于vue-cli npm run build之后vendor.js文件过大的解决方法

    问题 vue-cli npm run build命令默认把dependencies中的依赖统一打包,导致vendor.js文件过大,出现首屏加载过于缓慢的问题. 解决方案 像vue.axios.element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入,没有必要打包到vendor.js中. 1.在项目根目录index.html使用cdn节点导入 <div id="app"></div> <!-- 先引入 Vue --> <!--开发

  • 详解vuejs中执行npm run dev出现页面cannot GET/问题

    1.问题描述 最近用vue-cli搭建了一个小项目,其中在对项目进行打包测试时修改了webpack.base.conf.js中的配置信息,之后再用npm run dev之后出现如下的情况: 1.浏览器中无法呈现已有页面,并且在浏览器控制台中报404错误 2.命令窗口中并没有报错 其中有人说是路由等问题,后来通过创建新的项目对比配置文件信息,发现是配置信息导致: 注释部分是打包时需要修改的地方(根据打包时网站根目录,这个没处理好可能会出现图片路径加载失败问题),而上面才是在开发环境下需要的配置信息

随机推荐