UzumakiItachi
首页
  • JavaSript
  • Vue

    • Vue2
    • Vue3
  • React

    • React_18
  • WebPack
  • 浏览器相关
  • 工程化相关
  • 工作中遇到的问题以及解决方案
  • Git
  • 面试
  • 学习
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 个人产出
  • 实用工具
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

UzumakiItachi

起风了,唯有努力生存。
首页
  • JavaSript
  • Vue

    • Vue2
    • Vue3
  • React

    • React_18
  • WebPack
  • 浏览器相关
  • 工程化相关
  • 工作中遇到的问题以及解决方案
  • Git
  • 面试
  • 学习
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 个人产出
  • 实用工具
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • WebPack

  • 浏览器相关

  • 工程化相关

    • 执行npm run dev的时候发生了什么
    • 仓库版本管理-standard-version
    • git版本管理以及生成changelog
    • 发布一个npm包
    • gitlab runner 免密码登录服务器
    • 实现一个小程序持续集成工具
    • 使用changeset管理monorepo项目
    • pnpm+trubo打造一个极致丝滑的monorepo工程
    • 编写一个生成git提交信息的vite插件
    • 关于构建SPA项目的一些优化
    • 实现一个简易的脚手架
    • vite搭建多页面项目
    • 实现一个可自定义模板内容的脚手架
  • 工作中遇到的问题以及解决方案

  • Git

  • Vite

  • 一些小工具

  • 算法

  • 服务器

  • HTTP

  • 技术
  • 工程化相关
hanhanbuku
2023-03-03

执行npm run dev的时候发生了什么

当我们使用npm来管理项目的时候,会生成一个package.json文件。 这个文件就是用来描述整个项目的情况的。其中有一个script的对象,这里面会存放一些可执行的脚本命令。如 npm run build npm run dev 等等。具体的内容如下

image

对象的键名就是npm run xxx 而其对应的值就是可被执行的脚本。

在我们执行npm run dev的时候首先他会去到node_modules下的.bin文件夹下找到对应的可执行脚本。 比如我们执行npm run dev ,这里dev对应的是vite。那么他就回去.bin文件夹下找到名为vite的脚本文件

image

vite文件内容

image

那么此时可能大家就会有个疑问了,这个.bin目录下的脚本又是哪儿来的呢,可以看我们的package-lock.json文件里搜索一下bin

image

当我们npm install的时候,npm 读到该配置后,就将该文件软链接到 ./node_modules/.bin 目录下,而 npm 还会自动把node_modules/.bin加入$PATH,这样就可以直接作为命令运行依赖程序和开发依赖程序,不用全局安装了。

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

编辑 (opens new window)
上次更新: 2023/03/08, 09:35:38
Puppeteer-浏览器自动化操作实践
仓库版本管理-standard-version

← Puppeteer-浏览器自动化操作实践 仓库版本管理-standard-version→

最近更新
01
前端检测更新,自动刷新网页
06-09
02
swiper渲染大量数据的优化方案
06-06
03
仿抖音短视频组件实现方案
02-28
更多文章>
Theme by Vdoing | Copyright © 2023-2025 UzumakiItachi | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式