node和npm

背景(js)

1、为什么js能操作DOM和BOM?

原因:每个浏览器都内置了DOM、BOM这样的API函数

2、浏览器中的js运行环境?

v8引擎:负责解析和执行js代码

内置API:由运行环境提供的特殊接口,只能在所属的运行环境中被调用

3、js能否做后端开发?

js代码想要执行,必须还要借助node.js

node.js

1、什么是node.js?

node.js是一个基于Chrome v8引擎的js运行环境

2、node.js中的js运行环境

  • 浏览器是js的前端运行环境
  • node.js是js的后端运行环境
  • node.js中无法调用DOM和BOM等浏览器内置API

3、node.js可以做什么?

  • 可以基于Express框架,快速构建Web应用
  • 基于Electron框架,可以构建跨平台的桌面应用
  • 基于restify框架,可以快速构建API接口项目

4、在Node.js环境中执行js代码

打开终端;输入node要执行的js文件路径(先切换到文件所在的路径,再输入node xxx.js)

5、终端的快捷键

  • 使用Tab键,可以快速补全路径
  • 使用esc键,可以快速清空当前输入命令
  • 输入cls,可以清空终端

1、定义:Node.js中的第三方模块

2、为什么需要包?

包是基于内置模块封装出来的,提供了更高级、更方便的API,极大的提高了开发效率

npm

1、初次装包后多了哪些文件?

  • node_modules:用来存放所有已安装到项目中的包。require()导入第三方包时,就从这个目录中查找并加载包
  • package-lock.json:用来记录node_modules目录下的每一个包的下载信息

注:程序员不要手动修改node_modules或package-lock.json文件中的代码,npm包管理工具会自动维护它们

2、安装指定版本的包

复制代码
例:npm i moment@2.22.2

3、包的语义化版本规范

形式:"点分十进制",总共有三位数字,例:2.24.0

每一位数字代表含义如下:

  • 第一位:大版本
  • 第二位:功能版本
  • 第三位:Bug修复版本

版本号提升规则:只要前面的版本号增长,后面的版本号归零

4、npm-install命令常用的参数有哪些?

复制代码
1. npm install <package-name>    //安装指定的包。
2. --save 或 -S                 //将安装的包添加到 dependencies 中(在 npm 5 及以后版本中,默认行为)。
3. --save-dev 或 -D              //将安装的包添加到 devDependencies 中,适用于开发环境。
4. --global 或 -g                //全局安装包,使其可在任何地方使用,而不仅限于当前项目。
5. --production                  //仅安装 dependencies 中的包,跳过 devDependencies,适用于生产环境。
6. --no-save                    //安装时不更新 package.json 文件。
7. --force                    //强制安装,即使在一些错误情况下,也会继续安装。
8. --silent                    //安装时不显示任何日志信息,适用于脚本中。
9. --verbose                    //显示详细的安装过程信息,便于调试。
10. --registry <url>            //使用指定的 npm 注册表进行安装,适用于使用私有注册表的场景。
11. --no-audit                //安装时禁用安全审计。
12. --legacy-peer-deps        //忽略对等依赖的冲突,适用于需要旧版本依赖的项目。

包管理配置文件(package.json)

1、在项目开发中,一定要把node_modules文件夹,添加到.gitignore忽略文件中

node_modules 文件夹通常包含大量的依赖包,这些包可能占用数百兆字节的空间。将其从版本控制中排除,可以显著减少 Git 仓库的大小。

使用包时,通过 npm installyarn install 命令可以自动根据 package.json 文件中的依赖清单安装所需的包

2、快速创建package.json

复制代码
npm init -y

注:

  • 上述命令只能在英文的目录下成功运行,不能出现空格
  • 运行npm install 命令安装包的时候,npm包管理工具会自动把包的名称和版本号,记录到package.json中

3、dependencies

专门用来记录使用npm install命令安装了哪些包,这里面的包在开发和项目上线之后都需要用到

4、一次性安装所有包(把dependencies中涉及到的所以包都进行安装)

复制代码
npm install

5、卸载包

复制代码
npm uninstall 包名

6、devDependencies节点

这里面的包只在项目开发阶段用到,在项目上线后不会用到

复制代码
npm i webpack -D

7、下包速度慢

为什么下包速度慢?

在使用npm下包时,默认从国外的服务器进行下载,此时,网络数据传输需要经过漫长的海底光缆,因此下包速度会很慢

如何解决下包速度慢?

使用:淘宝NPM镜像服务器

原理:淘宝的镜像服务器会把国外官方服务器上的包同步到国内服务器,同时在国内提供下包的服务,从而极大提高了下包的速度

如何切换npm下包镜像源?

下包镜像源:下包的服务器地址

复制代码
//查看当前的下包镜像源
npm config get registry

//将下包的镜像源切换到淘宝镜像源
npm config set registry=http://registry.npm.taobao.org/( 淘宝镜像源地址)
nrm

作用:更加方便的切换下包的镜像源

具体使用:

复制代码
//通过npm包管理器,将nrm安装为全局可用的工具
npm i nrm -g

//查看所有可用的镜像源
nrm ls

//将下包的镜像源切换为taobao镜像
nrm use taobao

8、作用

1、包含项目的名称、版本、描述、作者、许可证等基本信息,帮助其他开发者了解项目。

2、列出项目所需的生产依赖(dependencies)和开发依赖(devDependencies),确保在安装项目时能够自动安装正确的包。

3、可以定义自定义命令(如测试、构建、启动等),通过 npm run 轻松调用

4、通过 version 字段管理项目的版本,便于发布和更新。

5、某些包可以在 package.json 中配置选项,提供项目的特定设置。

6、使用语义版本控制(SemVer)来指定依赖包的版本范围,确保项目在不同环境中的一致性。

7、通过定义项目的环境和依赖,使得项目在不同操作系统和环境中更易于安装和运行。

8、在发布包到 npm 注册表时,package.json 提供了必要的信息配置。

包管理工具下载包的分类

分类:项目包、全局包

项目包

定义:那些被安装到项目的node_modules中的包,都是项目包

分类:

  • 开发依赖包:被记录到devDependencies节点下的包,只在开发期间会用到
  • 核心依赖包:被记录到dependencies节点下的包,在开发期间和项目上线之后都会用到

安装命令区分:

复制代码
npm i 包名 -D   #开发依赖包
npm i 包名      #核心依赖包

全局包

只有工具性质的包,才有全局安装的必要;判断某个包是否需要全局安装后才能使用,可以参考官方文档的下载命令

安装:
复制代码
npm i 包名 -g       #全局安装指定的包
安装到:C:\Users\用户目录\AppData\Roaming\npm\node_modules
卸载:
复制代码
npm uninstall 包名 -g      #卸载全局的包

扩展小工具:

i5ting_toc

作用:可以把md文档转为html页面

使用步骤:

复制代码
#将i5ting_toc安装为全局包
npm install -g i5ting_toc

#调用i5ting_toc,轻松实现md转html的功能
i5ting_toc -f 要转换的文件路径 -o

规范的包结构

  1. 包必须以单独的目录而存在
  2. 包的顶级目录下要必须包含package.json这个包管理配置文件
  3. package.json中必须包含name、version、main这三个属性,分别代表包的名字、版本、包的入口
相关推荐
凯新生物10 分钟前
Mannose-PEG-CY5.5,CY5.5-PEG-Mannose技术手册:分子量选型与溶解性说明
javascript·c#·bash·symfony
wangbing112514 分钟前
ES6 (ES2015)新增的集合对象Set
前端·javascript·es6
nvd1131 分钟前
企业级 LLM 实战:在受限环境中基于 Copilot API 构建 ReAct MCP Agent
前端·copilot
Dragon Wu41 分钟前
TailWindCss cva+cn管理样式
前端·css
烤麻辣烫1 小时前
Web开发概述
前端·javascript·css·vue.js·html
Front思1 小时前
Vue3仿美团实现骑手路线规划
开发语言·前端·javascript
徐同保1 小时前
Nano Banana AI 绘画创作前端代码(使用claude code编写)
前端
Ulyanov1 小时前
PyVista与Tkinter桌面级3D可视化应用实战
开发语言·前端·python·3d·信息可视化·tkinter·gui开发
计算机程序设计小李同学1 小时前
基于Web和Android的漫画阅读平台
java·前端·vue.js·spring boot·后端·uniapp
干前端1 小时前
Message组件和Vue3 进阶:手动挂载组件与 Diff 算法深度解析
javascript·vue.js·算法