执行npm run serve/build的时候到底执行了什么？

最新推荐文章于 2024-05-28 16:22:32 发布
最新推荐文章于 2024-05-28 16:22:32 发布
阅读量532 收藏 6
点赞数 4
文章标签： npm 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43803987/article/details/138190871
版权

一、npm run build 执行的顺序是什么，到底执行了什么

众所周知，npm run 执行的是package.json里面scripts对象的key对应的value值，npm run serve实际执行的就是npm run vue-cli-service serve
在这里插入图片描述

首先我们来做个测试，新增一个test命令，如期的输出了“hello vue”
在这里插入图片描述

执行了test 后面的echo , 那么 npm run vue-cli-service serve 后面的serve 是干啥的呢？再来看看，其实就是将后面的当成了参数
在这里插入图片描述

我们再换个写法，毋庸置疑，肯定会报错，因为找不到自定义的my-npm-test
在这里插入图片描述

在node_modules文件夹下创建如下文件夹，这个js文件就算将参数打印出来，process.argv具体可参照
在这里插入图片描述

但是让这个文件执行的话还需要创建相对应的脚本

这个shell会将当前项目的可执行依赖目录（即node_modules/.bin）添加到环境变量path中，当执行之后之后再恢复原样。

就是说脚本命令中的依赖名会直接找到node_modules/.bin下面的对应脚本，而不需要加上路径（官网（执行npm help run）也有提到过）。
在这里插入图片描述

举一反三，npm run serve也就不难理解了，node_modules/.bin下面一定有两个vue-cli-service的文件，然后很容易就会找到vue-cli-service.js 这个文件（未完待续）

木秃头的前端
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-cli使用 npm run build打包后流程
weixin_40588273的博客
09-20 3533
目前，使用vue-cli脚手架写了一个前端项目，之前一直是使用npm run dev 在8080端口上进行本地调试。突然想使用npm run build进行上线打包，试试能否成功看到我的项目效果。 1. npm run build命令。 ** 2.一开始运行npm run build 命令时，有这么一段提示： ** 这段话的意思就是说： 构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作。 到项目目录下的config文件夹里的index.js文件中,将build对象下的as
vue源码解析之npm run build发生了什么？
weixin_33881140的博客
09-09 6015
npm run build发生了什么？ 最近总是感觉对vue的一些用法和语句还是不理解，于是决定撸一下源码，用于加深自己对vue的理解，同时vue主要是通过rollup进行打包编译，因为它相比webpack更加轻量，行了，废话不多说了，开始了！ 如上图所示，当我们执行npm runbuild命令的时候，首先package.json会将其解析为node build/build.js，执行这个目...
npm run build命令详解及使用示例
最新发布
Leon_Jinhai_Sun的博客
05-28 1801
npm run build命令详解及使用示例
npm run serve/build 背后的真实操作
热门推荐
奔跑的痕迹的博客
02-28 1万+
vue CLI 用起来的确很舒服，方便省事，但他经过层层封装很难明白，执行完那个npm run serve/build 后他都干了些什么，甚至不知道整个项目是怎么跑起来的，今天自己抽时间就去瞅瞅,为加深记录特此记录记录 文章目录一、探寻npm run 背后的真实操作1、看看 npm run serve2、仿造一个serve2-1. 创建测试文件夹2-2. 在 node_modules\.b...
执行了npm run build后，它会依次做什么动作
weixin_35751412的博客
12-29 1749
npm run build 是一个 npm script，这意味着它会在 package.json 文件中的 "scripts" 对象中寻找对应的命令并执行。 通常，npm run build 脚本用于将应用程序的源代码构建成可部署的版本。这个过程可能包括编译、压缩、优化代码，以及其他必要的步骤。具体来说，npm run build 会依次执行以下动作： 执行所有预构建步骤，例如编译 Sass ...
NPM基本命令
清沙
07-16 403
当node_modules、package.json发生变化时，自动生成package-lock.json，作用为锁定安装包的依赖，便于后续重新安装时生成相同的依赖，忽略开发过程中的依赖更新。安装express，express为node的web框架，安装成功后，目录下新增package-lock.json、node_modules，node_modules保存下载的JS。npm（NodePackageManager），是node包管理和分发工具，通过npm可以很方便地管理和下载js工程。......
当我们执行 npm run serve 时到底发生了什么？
奇舞周刊
04-15 114
在前端开发中，npm run serve 是一个常见的命令，尤其是在使用 Vue CLI 构建项目时。但是为什么直接运行 vue-cli-service serve 会报错，但使用 npm run serve 却可以成功启动项目呢？npm scripts 的基本原理先回顾一下 npm 命令的基本原理。在 package.json 文件中的 "scripts" 字段允许我们定义一组自定义的命令。例如...
基于vue cli 通过命令行传参实现多环境配置
12-09
npm run serve //默认本地开发环境 npm run serve -sit //本地开发中使用sit环境 npm run serve -uat //本地开发中使用uat环境 npm run build //默认打包后使用生产环境 npm run build -local //打包后使用本地环境 ...
npm
03-01
zimo-btn 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行测试 npm run test 整理和修复文件 npm run lint 运行单元测试 npm run test:unit 自定义配置 请参阅。
gulp:使用 Gulp 完成项目的自动化构建
05-09
用于生产npm run serve === gulp serve // 开启服务，前提是run build 再执行servenpm run build_serve === gulp build_serve // 合并gulp build 跟serve编程思路：安装项目所需依赖： npm install...
electron-build-hello-world:使用Vue.js和Electron构建Hello World桌面应用程序
05-25
npm run serve 编译并最小化生产 npm run build 运行测试 npm run test 整理和修复文件 npm run lint 运行用于开发环境的桌面应用程序 npm run electron:serve 为当前平台构建 npm run electron:build 为mac-...
npm-stats：:chart_increasing:使用vue构建npm软件包统计信息仪表板
02-03
‍:school: 讲解如果您愿意，可以通过以下教程学习如何构建类似的服务：构建设置# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with ...
前端开发技术栈（工具篇）：Vue/Node.js项目构建和包管理器npm的使用以及命令详解
SteveRocket's-Blog
10-28 3460
npm 是一个强大的包管理工具，它使开发人员能够轻松地安装、更新和管理项目依赖的包。通过初始化一个package.json 文件，你可以描述你的项目并记录其依赖关系。使用 npm install 命令，你可以安装和管理包。使用 npm publish 命令，你可以发布自己的包到 npm 注册表。无论是在开发过程中还是在分享你的包时，npm 都提供了丰富的功能和命令来满足你的需求。
❤️作为开发人员你需要知道的 npm 命令❤️
努力是为了站在万人之中，成为别人的光
08-11 6060
NPM 全称 Node Package Manager，是很多开发人员最常用的工具之一。它将所有模块放在一个地方，以便 node 可以找到它们，并管理依赖冲突。以下是是作为开发人员应该了解的最常见 npm 命令的列表。
npm基本操作及命令讲解
weixin_43749805的博客
05-12 3496
在运行npm run build命令时，npm会自动执行定义的build脚本，即执行webpack打包应用程序。npm是Node.js自带的包管理器，使用方便，可以很方便地在项目中使用第三方模块，也可以发布自己的模块供其他人使用。代码中，定义了一个名为start的脚本，它会执行node命令，并启动app.js文件。在使用npm时，可以通过在package.json文件中定义自定义脚本来运行一些自定义的构建和启动命令。除了test脚本外，还可以定义其他自定义脚本，例如：build脚本、start脚本等。
NPM 常用命令
飞扬_柳絮的专栏
03-16 263
设置淘宝 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 一、安装 安装某个npm包： npm i packageName 安装某个版本的包： npm i packageName@x.x.x 安装并写入package.json生产依赖： npm i packageName -S 安装并写入packag...
npm 常用命令
温温的博客
05-17 6047
1. npm run build 打包命令 or npm run build:prod; 2. npm install 安装依赖(模块) 简写 npm i 3. npm uninstall 卸载依赖 (一般直接重新下载依赖就可以直接覆盖掉之前的) 4. npm update 更新依赖 (一般直接重新下载依赖就可以直接覆盖掉之前的) 5. npm init 在项目中引导创建一个package.json文件 6. npm version 查看模块版本 简写 npm -v ......
npm常用命令
Miss_Y0的博客
05-19 1174
查看版本 npm -v 修改版本 npm install npm -g // 升级到最新版本 npm -g install npm@版本号 // 指定版本 查看配置信息 npm config list 查看镜像 npm config get registry 修改镜像（全局） npm config set registry https://registry.npmjs.org // 官方源 npm config set registry https://registry.n..
npm run build和npm run serve
06-28
### 回答1： npm run build 和 npm run serve 是使用 npm 命令来运行项目的不同方式。 npm run build 命令用于构建项目，编译代码并生成生产环境所需的相关文件，以便最终将项目部署到 Web 服务器。 npm run serve 命令则用于启动本地服务器（通常是 Node.js 服务器）来运行项目，供开发者在其本地机器上进行开发和测试。通常情况下，npm run serve 模式下的项目具有更多的调试和开发工具，方便开发者进行调试和测试。 ### 回答2： npm run build和npm run serve是两个常用的命令，都是在使用npm管理包和构建项目时需要用到的。 npm run build是一个用于构建项目的命令。一般在项目开发完成后，需要将项目打包成发布版本。这个命令会执行构建脚本，并按照设定好的构建规则将项目的各个模块打包到一个文件中。执行构建过程中，会进行压缩、优化等各种处理，以减小打包后文件的大小，提高用户打开速度。通过这个命令生成的文件，用户可以直接在浏览器中访问，查看项目效果。 npm run serve是一个用于启动本地开发服务器的命令。在项目开发过程中，需要频繁地运行和调试代码。这个命令会启动一个本地开发服务器，实时监听文件变化，并及时更新浏览器中的页面。这样，在开发过程中，开发人员可以更加方便快捷地进行调试和测试，提高开发效率和质量。 总的来说，npm run build和npm run serve是项目开发过程中常用的两个命令。npm run build用于构建项目，生成发布版本；npm run serve则用于启动本地开发服务器，方便快捷地进行调试和测试。它们都可以通过npm管理包，并通过npm scripts来自定义脚本，方便地进行各种操作和定制化。 ### 回答3： npm run build 和 npm run serve 是开发中常用的两个命令。 npm run build 是用于将开发中的源代码打包成生产环境中可以运行的静态文件，包括 HTML、CSS、JS 等。这个命令会把项目中的代码进行优化、压缩，减少访问大小，以提高网站性能，最终生成一个构建后的文件夹。 一般情况下，我们在开发的时候会在一个 devServer 上进行预览和测试，而当我们需要在生产环境中部署我们的代码时，就需要打包我们的代码。通过 npm run build 的命令，我们可以把开发完成的项目打包成生产环境可执行的代码。 相反，npm run serve 是用于在本地预览构建后的项目的命令。它利用 webpack 开启一个本地服务器，在 localhost:8080 上启用我们的构建方式生成的文件，从而进行实时调试和查看。 在项目开发结束后，我们可以使用 npm run build 命令来生成最终的部署文件，然后将其部署到服务器上。如果在部署前想要查看一下部署后的网站效果，就可以通过 npm run serve 命令在本地启动一个服务器进行查看。 总的来说，npm run build 用于构建代码，生成可部署的文件；npm run serve 用于启动本地预览服务器，方便开发者在本地调试查看代码效果。两个命令都是开发过程中不可或缺的一部分。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值