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

 更新时间:2022年07月05日 10:05:18   作者:小胖子学习笔记  
这篇文章主要为大家介绍了前端面试之输入npm?run后发生了什么及执行原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

引言

在前端开发的工作当中,使用 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-appvue-cli ,在全局安装后,就可以直接使用如 vue-cli projectName 这样的命令来创建项目了。

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

相关文章

  • Node.js数据流Stream之Duplex流和Transform流用法

    Node.js数据流Stream之Duplex流和Transform流用法

    这篇文章介绍了Node.js数据流Stream之Duplex流和Transform流的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • nodejs+express实现文件上传下载管理网站

    nodejs+express实现文件上传下载管理网站

    这篇文章主要为大家详细介绍了nodejs+express实现文件上传下载管理的网站,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 在nodeJs中如何修改json文件中的数据

    在nodeJs中如何修改json文件中的数据

    这篇文章主要介绍了在nodeJs中如何修改json文件中的数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Node.js中的HTTP模块与URL模块

    Node.js中的HTTP模块与URL模块

    这篇文章介绍了Node.js中的HTTP模块与URL模块,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • VsCode无法识别node问题解决过程

    VsCode无法识别node问题解决过程

    这篇文章主要给大家介绍了关于VsCode无法识别node问题解决的相关资料,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • Node.js?操作本地文件及深入了解fs内置模块

    Node.js?操作本地文件及深入了解fs内置模块

    这篇文章主要介绍了Node.js?操作本地文件及深入了解fs内置模块,node.js作为服务端应用,肯定少不了对本地文件的操作,像创建一个目录、创建一个文件、读取文件内容等都是我们开发中经常需要用到的功能
    2022-09-09
  • Node绑定全局TraceID的实现方法

    Node绑定全局TraceID的实现方法

    这篇文章主要介绍了Node 绑定全局 TraceID的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Node.js实现断点续传

    Node.js实现断点续传

    上传图片、Excel等,毕竟几M的大小可以很快就上传到服务器。 针对于上传视频等大文件几百M或者几G的大小,就需要等待比较长的时间。这就产生了对应的解决方法,对于大文件上传时的暂停、断网、网络较差的情况下, 使用切片+断点续传就能够很好的应对上述的情况
    2021-06-06
  • 使用GruntJS构建Web程序之Tasks(任务)篇

    使用GruntJS构建Web程序之Tasks(任务)篇

    任务(Tasks)是grunt的核心概念,你所做的很多工作比如资源合并(concat)、压缩(uglify)都是在配置任务。 每次grunt运行的时候,你指定的一个或多个任务也在运行,如果你没有指定任务,那么一个默认名为“default”的任务将自动运行。
    2014-06-06
  • 详解Nodejs get获取远程服务器接口数据

    详解Nodejs get获取远程服务器接口数据

    这篇文章主要介绍了Nodejs get获取远程服务器接口数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03

最新评论

?


http://www.vxiaotou.com