天天命令中输入 npm run xxx,倒底 npm run 做了什么,为什么就能开启一个服务?

简介: 天天命令中输入 npm run xxx,倒底 npm run 做了什么,为什么就能开启一个服务?

人生的意义在于修炼灵魂,首先要有纯洁美丽的心灵,这是思考人生要具备的,拥有什么样的心灵,就会选择什么样的人生,实现什么样的人生价值

--出自《稻盛和夫给年轻人的忠告》


什么是npm

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

出自《菜鸟教程》

其实说白了 npm  就是一个基于 node 下的包管理工具,做过 java 开发的同学肯定 maven,作用都差不多。但是今天我们重点介绍的不是 npm  是什么,而且是基于我们平时在开发的过程中都会在命令中行中输入:

//开发阶段
npm run dev
或者
npm run serve
// 打包阶段
npm run build

到底是怎么样的一个原理。


基于webpack打包工具下的npm

  其实npm和webpack两者没有必然的联系,并不是说我的npm命令只能运行在webpack中。

      当我们用 npm init 初始化一个项目之后,我们就可用 npm 命令了,这里也不需要webpack。

      但是众所周知我们在开发Vue项止的时候,都少不了和 webpack 和 vite 这样的工具打交道。下面我就介绍一下基于webpack打包工具下的npm是怎么样的运行过程。

首先我们创建一个vue项目项目:

vue create test-vue

我的vue-cli版本是4.4.6,所以要通过这行命令创建。其它版本的可以查一下官方文档。这里不过多解释。

 当创建好之后出现以下提示,说明项目已经创建好了

 用vscode打开项目,看一下文件目录:

4edc953e2c684bbe819ffa954c899c08.png

这里面有一个比较重要的文件就是 package.json。

下篇文章我们重点介绍一下 package.json 倒底是怎么个东西。


原理分析

我们在命令行中输入命令:

npm run serve

看一下运行成功之后的提示信息:

4edc953e2c684bbe819ffa954c899c08.png

有没有小伙伴想过这样的问题:为什么是运行npm run serve命令呢,这些命令在哪里呢,我该怎么记住这些命令。

其实这个命令不需要记这个命令,我们只要记住 npm run就好,当我们创建完项目之后可以看到一个package.json文件。看一下主要的内容:文件内容过多,我们主要看一下 script标签的内容

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}

聪明的小朋友可能已经明白了,会不会我们 npm run serve 就是执行的的第一行吧。其实是对的,当我们输入 npm run 之后,就是相当于运行 vue-cli-service serve 这行指令。这个名称可以改,我们改成 dev 之后,就是 npm run dev。不知小伙伴是否明白了。

是谁帮我们做的这些事

那么又是谁帮我们把项目运行起来的呢?

  • 输入 npm run serve回车,
  • npm会在项目的目录下找到 node_modules文件夹下的 .bin目录
  • 把此目录添到系统的path环境变量下,执行完之后再把环境变量下的目录删除。
  • 打开这个文件夹可以看到一个文件:vue-cli-service
    这其实是一个 link 快捷方式,它指向 @
    vue/cli-service/bin/vue-cli-service.js
    这个文件。

npm run serve 就是在运行这个vue-cli-service.js脚本文件。看一下里面的一些代码:

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
// ....省略了一些代码
const command = args._[0]
service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

这个文件中的源码是非常多的,我们只是取了比较重要和直观的源码进行分析了一下,让大家明白,这里其实就是开启了一个node服务。

最重要的是上面的那几个步骤,大家要做到心中有数,要尽量:知其然,知其所以然。这样才能对自己的内功有更好的帮助和提升。

相关文章
|
7月前
|
JavaScript 算法 前端开发
解决若依框架中 npm run dev 卡在 95% 的问题
本文深入探讨若依框架中 `npm run dev` 卡在 95% 的问题,分析其与 Node.js 17+ 内置 OpenSSL 3.0 加密策略变更的关系。提供临时(设置环境变量 `NODE_OPTIONS=--openssl-legacy-provider`)和永久(修改 `package.json` 脚本)解决方案,同时建议降级 Node.js 或更新依赖以根本解决兼容性问题。最后强调依赖管理与开发环境标准化的重要性,助力团队高效开发。
696 1
|
7月前
|
JavaScript 算法 前端开发
nodejs18版本 npm run dev失败
在使用若依框架运行 `npm run dev` 时,若卡在 95% 并报错,通常是 Node.js 17+ 与 Webpack 的兼容性问题。原因是 OpenSSL 3 的加密算法变化导致依赖冲突。解决方法:Windows 下运行 `set NODE_OPTIONS=--openssl-legacy-provider`,macOS/Linux 使用 `export NODE_OPTIONS=--openssl-legacy-provider`,然后重新启动开发服务即可。此设置让 Node.js 启用旧版加密支持,恢复正常构建流程。
682 0
执行npm run dev的时候发生了什么
执行npm run dev的时候发生了什么
1189 60
|
11月前
|
JavaScript 算法 前端开发
为什么npm run serve正常,npm run build就报错:digital envelope routines::unsupported
通过本文的分析,我们详细介绍了 `npm run serve`正常但 `npm run build`时报错:`digital envelope routines::unsupported`的原因及解决方案。主要从检查Node.js版本、更新依赖、检查依赖库、配置文件及环境变量等方面进行了深入探讨。希望本文能帮助开发者解决这一问题,确保项目顺利构建和部署。
1162 6
|
缓存 JavaScript 前端开发
npm命令介绍
npm命令介绍
209 1
|
JSON JavaScript 数据安全/隐私保护
npm命令:常用npm命令及其详解!
npm命令:常用npm命令及其详解!
|
缓存 JavaScript 前端开发
npm常用命令详解与实践
npm常用命令详解与实践
|
JavaScript 开发工具
支付系统----微信支付22------初始化Vue项目,npm run serve -- -- port 8888,Vue默认打开是8888的写法
支付系统----微信支付22------初始化Vue项目,npm run serve -- -- port 8888,Vue默认打开是8888的写法
TS,编写TS文件,编写hello.ts文件,cmd下打开终端,输入tsc hello.ts会生成一个hello.js文件,简化命令,npm i -g ts-node,ts-node hello.ts
TS,编写TS文件,编写hello.ts文件,cmd下打开终端,输入tsc hello.ts会生成一个hello.js文件,简化命令,npm i -g ts-node,ts-node hello.ts
|
JavaScript
【解决方案】vue 项目 npm run dev 时报错:‘cross-env‘ 不是内部或外部命令,也不是可运行的程序
【解决方案】vue 项目 npm run dev 时报错:‘cross-env‘ 不是内部或外部命令,也不是可运行的程序
1886 0

热门文章

最新文章

推荐镜像

更多
  • NPM