前端知识之Node.js、npm

红太狼 2023-01-10 14:57 157阅读 0赞

# 一、Node.js的使用 #

### 文章目录 ###

*  一、Node.js的使用
 *   *  1. 概述
     *  2. 作用
     *  3. 安装Node.js
     *  4. 使用VScode及Node.js运行JS文件
 *  二、npm的使用
 *   *  1. 概念
     *  2. 下载和安装
     *  3. 初始化npm项目
     *  4. 修改npm镜像
     *  5. 安装依赖
     *  6. 根据package.json及package-lock.json文件下载依赖
     *  7. 其他指令

## 1. 概述 ##

Node.js是基于Google的V8引擎的运行在服务端的JavaScript运行环境

## 2. 作用 ##

(1) 不需要浏览器即可运行JavaScript语言，直接使用node.js运行JS

(2) 模拟服务器效果，类似Tomcat

## 3. 安装Node.js ##

运行msi格式的安装包，一路点击下一步即可；安装完成后，检查是否安装成功  
![在这里插入图片描述][20210125130102995.png]

## 4. 使用VScode及Node.js运行JS文件 ##

(1) 在JS文件所在的文件夹右击

JS文件的内容`console.log('hello nodejs')`

![在这里插入图片描述][20210125130111536.png]

(2) 在打开的终端中输入指令  
![在这里插入图片描述][20210125130120863.png]

# 二、npm的使用 #

## 1. 概念 ##

npm是包管理工具，类似于Java中的Maven；npm用在前端中，管理(下载) JS文件的依赖

## 2. 下载和安装 ##

Node.js中已经集成了npm，故安装Node.js同时会安装npm

![在这里插入图片描述][20210125130137701.png]

## 3. 初始化npm项目 ##

使用npm必须先对项目的文件夹执行`npm init -y`命令 (-y表示配置使用默认值)

执行后会生成package.json文件，类似pom.xml文件，内容如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70]

## 4. 修改npm镜像 ##

使用指令`npm config set registry https://registry.npm.taobao.org`，以后会使用淘宝镜像下载依赖

![在这里插入图片描述][20210125130203625.png]

## 5. 安装依赖 ##

使用指令`npm install 依赖名称`，即可联网下载指定的依赖

![在这里插入图片描述][20210125130219905.png]

使用指令后会在文件夹下新增内容

![在这里插入图片描述][20210125130226978.png]

## 6. 根据package.json及package-lock.json文件下载依赖 ##

使用指令`npm install`，即可将dependencies节点下的所有依赖及其指定版本下载到本地

## 7. 其他指令 ##

(1) 安装依赖时指定版本`npm install 依赖文件名 @版本号`

(2) 当前工作区安装插件`npm install --save-dev eslint 或 npm install -D eslint`

(3) 全局安装插件`npm install -g webpack`

(4) 更新依赖文件`npm update 包名 或 npm update -g 包名 (全局)`

(5) 卸载依赖文件`npm uninstall 包名 或 npm uninstall -g 包名 (全局)`

注：使用npm指令的前提是已经对项目的文件夹执行了`npm init`命令

[20210125130102995.png]: /images/20221119/139b4f4fe0b44dbf98d9591640039d18.png
[20210125130111536.png]: /images/20221119/3ba8ceb5f3a1476fa5eca2b2c1c1c3ae.png
[20210125130120863.png]: https://img-blog.csdnimg.cn/20210125130120863.png
[20210125130137701.png]: https://img-blog.csdnimg.cn/20210125130137701.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210125130147140.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA==,size_16,color_FFFFFF,t_70
[20210125130203625.png]: https://img-blog.csdnimg.cn/20210125130203625.png
[20210125130219905.png]: https://img-blog.csdnimg.cn/20210125130219905.png
[20210125130226978.png]: https://img-blog.csdnimg.cn/20210125130226978.png