认识npm-软件包管理器

目录

[1. 认识npm-软件包管理器](#1. 认识npm-软件包管理器)

[1.1. 什么是npm-软件包管理器?(定义)](#1.1. 什么是npm-软件包管理器?(定义))

[1.2. npm 软件包管理器作用?](#1.2. npm 软件包管理器作用?)

[1.3. 下载的包会存放在哪里?](#1.3. 下载的包会存放在哪里?)

[1.4. 如何使用?](#1.4. 如何使用?)

[1.4.1. 初始化清单文件](#1.4.1. 初始化清单文件)

[1.4.2. 下载软件包](#1.4.2. 下载软件包)

[1.4.3. 使用软件包](#1.4.3. 使用软件包)

[1.5. 练习(需求)](#1.5. 练习(需求))

[2. npm - 安装所有依赖](#2. npm - 安装所有依赖)

[2.1. 引入问题](#2.1. 引入问题)

[2.2. 问题原因](#2.2. 问题原因)

[2.3. 为什么不直接把软件包传给别人,而通过npm安装所有依赖的方式](#2.3. 为什么不直接把软件包传给别人,而通过npm安装所有依赖的方式)

[2.4. 解决 - 项目终端输入命令:npm i](#2.4. 解决 - 项目终端输入命令:npm i)

[3. npm - 全局软件包 nodemon](#3. npm - 全局软件包 nodemon)

[3.1. 软件包区别](#3.1. 软件包区别)

[3.2. nodemon 作用](#3.2. nodemon 作用)

[3.3. 如何使用](#3.3. 如何使用)


1. 认识npm-软件包管理器

1.1. 什么是npm-软件包管理器?(定义)

1.2. npm 软件包管理器作用?

  • 下载软件包以及管理版本

1.3. 下载的包会存放在哪里?

  • 当前项目下的 node_modules 中,并记录在 package.json 中

1.4. 如何使用?

1.4.1. 初始化清单文件
  • npm init -y(得到 package.json 文件,有则略过此命令)
1.4.2. 下载软件包
  • npm i 软件包名称
1.4.3. 使用软件包

1.5. 练习(需求)

  • 需求:使用 dayjs 软件包,来格式化日期时间
  • 图解
javascript 复制代码
/**
 * 目标:使用 npm 下载 dayjs 软件包来格式化日期时间
 *  1. (可选)初始化项目清单文件,命令:npm init -y
 *  2. 下载软件包到当前项目,命令:npm i 软件包名称
 *  3. 使用软件包
 */
// 3. 使用软件包
const dayjs = require('dayjs')
const nowDateStr = dayjs().format('YYYY-MM-DD')
console.log(nowDateStr)

2. npm - 安装所有依赖

2.1. 引入问题

  • 项目中不包含 node_modules,能否正常运行?

2.2. 问题原因

  • 不能,缺少依赖的本地软件包

2.3. 为什么不直接把软件包传给别人,而通过npm安装所有依赖的方式

  • 因为自己用 npm 下载依赖比磁盘传递拷贝要快得多

2.4. 解决 - 项目终端输入命令:npm i

  • 下载 package.json 中记录的所有软件包

3. npm - 全局软件包 nodemon

3.1. 软件包区别

  • 本地软件包:当前项目内使用,封装属性和方法,存在于 node_modules
  • 全局软件包:本机所有项目使用,封装命令和工具,存在于系统设置的位置

3.2. nodemon 作用

  • 替代 node 命令,检测代码更改,自动重启程序

3.3. 如何使用

  • 安装:npm i nodemon -g(-g 代表安装到全局环境中)
  • 运行:nodemon 待执行的目标 js 文件
相关推荐
张雨zy25 分钟前
Vue 项目管理数据时,Cookie、Pinia 和 LocalStorage 三种常见的工具的选择
前端·javascript·vue.js
五月君_32 分钟前
Nuxt UI v4.3 发布:原生 AI 富文本编辑器来了,Vue 生态又添一员猛将!
前端·javascript·vue.js·人工智能·ui
!执行43 分钟前
遇到 Git 提示大文件无法上传确实让人头疼
前端·github
坚持学习前端日记1 小时前
个人网站从零到盈利的成长策略
前端·程序人生
CamilleZJ1 小时前
eslint+prettier
前端·eslint·工程化·prettier
web小白成长日记2 小时前
深入理解 React 中的 Props:组件通信的桥梁
前端·javascript·react.js
tjswk20082 小时前
在ios上动态插入元素的列表使用:last-child样式可能不能及时生效
前端
小小荧2 小时前
CSS 写 SQL 查询?后端慌了!
前端·sql
小高0072 小时前
🔥3 kB 换 120 ms 阻塞? Axios 还是 fetch?
前端·javascript·面试
千寻girling2 小时前
面试官 : “ Vue 选项式api 和 组合式api 什么区别? “
前端·vue.js·面试