Node 常用

柔情只为你懂 2023-10-06 19:13 11阅读 0赞

#### 阅读目录 ####

*  NPM版本控制
 *   *  NPM 使用介绍
     *  全局安装与本地安装
     *   *  本地安装
         *  全局安装
 *  npm 的 --save 选项
 *  node工具之nodemon
 *  express 查看版本
 *  常用工具列表
 *  node的版本管理工具 \`nvm\`
 *   *  查看当前所有的node版本
     *  显示所有可下载的版本
     *  安装指定的版本
     *  使用特定版本
 *  \`nrm\` 资源管理工具，可以切换国内服务器下载
 *  常用命令
 *  Node.js REPL(交互式解释器)
 *  Axios 是一个基于 promise 的 HTTP 库
 *   *  axios 响应结果
     *  async/await 用法
 *  package.json 中 ~ 和 ^ 的区别
 *  npm i 和 npm install 的区别
 *  react 的 package.json 文件的 scripts
 *  npx

“有的时候我们想要对别人好，在这之前先想想别人需不需要。”

“生命中所有得到的礼物，早已在暗中标好了价格。”

## NPM版本控制 ##

aplha 版  - 内测版
    beta 版   - 公测版
    rc 版     - 预览版
    stable 版 - 用户可用

### NPM 使用介绍 ###

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用。

允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。命令如下，出现版本提示表示安装成功:

`npm install express`

安装好之后，`express` 包就放在了工程目录下的 `node_modules` 目录中，因此在代码中只需要通过 `require('express')` 的方式就好，无需指定第三方包路径。

`var express = require('express');`

### 全局安装与本地安装 ###

npm 的包安装分为本地安装（local）、全局安装（global）两种，  
从敲的命令行来看，差别只是有没有-g

npm install express          # 本地安装
    npm install express -g       # 全局安装

#### 本地安装 ####

1、将安装包放在 ./node\_modules 下（运行 npm 命令时所在的目录），如果没有 node\_modules 目录，会在当前执行 npm 命令的目录下生成 node\_modules 目录。

2、 可以通过 require() 来引入本地安装的包。

#### 全局安装 ####

1、 将安装包放在 /usr/local 下或者你 node 的安装目录。  
2、 可以直接在命令行里使用。

## npm 的 --save 选项 ##

\-`save`和`save-dev`可以省掉你手动修改`package.json`文件的步骤。

`spm install module-name -save` 自动把模块和版本号添加到dependencies部分

`spm install module-name -save-dve` 自动把模块和版本号添加到`devdependencies`部分

## node工具之nodemon ##

nodemon是一种工具，可以自动检测到目录中的文件更改时通过重新启动应用程序来调试基于node.js的应用程序。

安装

npm install -g nodemon  # 全局安装
    //或
    npm install --save-dev nodemon # 安装到本地json

才有全局安装要么容易报错

## express 查看版本 ##

`npm list express`

## 常用工具列表 ##

web服务: express, koa, hapi
    模板引擎: handlebars, ejs, jade
    前端打包: webpak, fis
    任务管理: gulp
    单元测试: karma, mocha, jasmine
    包管理器: npm, cnpm, yarn
    守护进程: pm2
    node 版本管理工具：nvm
    检测文件变化，自动重启node：nodemon
    nrm 是资源管理工具，可以切换国内服务器下载

内置核心模块

http服务
    fs文件操作
    url路径
    path路径处理
    电脑操作系统

## node的版本管理工具 `nvm` ##

m 概念  
 nvm全名node.js version management，是一个node的版本管理工具。

首先最重要的是：一定要卸载已安装的 NodeJS，否则会发生冲突。

nvm  list       					查看当前所有的node版本
    nvm  list available    				显示所有可下载的版本
    nvm  install 10.13.0      			安装指定的版本
    nvm  use --delete-prefix 10.13.0    切换到指定node版本
    nvm  use 11.13.0   					使用特定版本
    nvm  uninstall 11.13.0   			卸载

### 查看当前所有的node版本 ###

nvm list
    
        15.11.0
        14.16.0
      * 14.15.5 (Currently using 64-bit executable)

### 显示所有可下载的版本 ###

nvm list available
    
    |   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
    |--------------|--------------|--------------|--------------|
    |    17.0.1    |   16.13.0    |   0.12.18    |   0.11.16    |
    |    17.0.0    |   14.18.1    |   0.12.17    |   0.11.15    |
    |   16.12.0    |   14.18.0    |   0.12.16    |   0.11.14    |
    |   16.11.1    |   14.17.6    |   0.12.15    |   0.11.13    |
    |   16.11.0    |   14.17.5    |   0.12.14    |   0.11.12    |
    |   16.10.0    |   14.17.4    |   0.12.13    |   0.11.11    |
    |    16.9.1    |   14.17.3    |   0.12.12    |   0.11.10    |
    |    16.9.0    |   14.17.2    |   0.12.11    |    0.11.9    |
    |    16.8.0    |   14.17.1    |   0.12.10    |    0.11.8    |
    |    16.7.0    |   14.17.0    |    0.12.9    |    0.11.7    |
    |    16.6.2    |   14.16.1    |    0.12.8    |    0.11.6    |
    |    16.6.1    |   14.16.0    |    0.12.7    |    0.11.5    |
    |    16.6.0    |   14.15.5    |    0.12.6    |    0.11.4    |
    |    16.5.0    |   14.15.4    |    0.12.5    |    0.11.3    |
    |    16.4.2    |   14.15.3    |    0.12.4    |    0.11.2    |
    |    16.4.1    |   14.15.2    |    0.12.3    |    0.11.1    |
    |    16.4.0    |   14.15.1    |    0.12.2    |    0.11.0    |
    |    16.3.0    |   14.15.0    |    0.12.1    |    0.9.12    |
    |    16.2.0    |   12.22.7    |    0.12.0    |    0.9.11    |
    |    16.1.0    |   12.22.6    |   0.10.48    |    0.9.10    |

### 安装指定的版本 ###

nvm install 17.0.1
    Downloading node.js version 17.0.1 (64-bit)...
    Complete
    Creating C:\Users\Administrator\AppData\Roaming\nvm\temp
    
    Downloading npm version 8.1.0... Complete
    Installing npm v8.1.0...
    
    Installation complete. If you want to use this version, type

### 使用特定版本 ###

C:\Users\Administrator>nvm list
    
        17.0.1
        15.11.0
        14.16.0
      * 14.15.5 (Currently using 64-bit executable)
    
    nvm use 17.0.1
    Now using node v17.0.1 (64-bit)
    
    C:\Users\Administrator>nvm list
    
      * 17.0.1 (Currently using 64-bit executable)
        15.11.0
        14.16.0
        14.15.5

## `nrm` 资源管理工具，可以切换国内服务器下载 ##

安装：`npm install nrm -g`  
查看：`nrm ls` （注：单词list缩写，查看可用服务器）  
切换：`nrm use` 服务器  
测速：`nrm test` 查看哪个服务器最快

## 常用命令 ##

npm -v      查看版本
    
    查看react-router-dom所有版本
    npm view react-router-dom versions
    
    使用淘宝 NPM 镜像
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    全局安装与本地安装
    npm 的包安装分为本地安装（local）、全局安装（global）两种，
    从敲的命令行来看，差别只是有没有-g
    
    npm install express          # 本地安装
    npm install express -g       # 全局安装
    npm install -S react@16.14.0   # 指定版本安装
    npm i react-router-dom@5.2.0  安装指定版本
    ----------------------------------------------------------------------------
    列出已安装的软件包
    PS D:\Centos\PHPstudyWWW\react\demo02> npm ls react-dom
    demo02@0.1.0 D:\Centos\PHPstudyWWW\react\demo02
    +-- @testing-library/react@12.1.2
    | `-- react-dom@17.0.2 deduped
    `-- react-dom@17.0.2
    ----------------------------------------------------------------------------
    
    
    npm list -g    # 查看所有全局安装的模块
    
    npm list express  # 查看模块版本号
    
    npm查看全局安装过的包
    PS E:\node\Project> npm list -g --depth 0
    C:\Program Files\nodejs
    +-- body-parser@1.19.0
    +-- express@4.17.1
    +-- nodemon@2.0.12
    `-- npm@6.14.15
    
    查看本地配置
    PS E:\node\Project> npm list --depth 0
    Project@1.0.0 E:\node\Project
    +-- art-template@4.13.2
    +-- ejs@3.1.6
    +-- express@4.17.1
    +-- express-art-template@1.0.1
    +-- mongoose@6.0.3
    `-- nodemon@2.0.12
    
    npm uninstall express  # 卸载 Node.js 模块
    npm uninstall -g create-react-app  全局卸载
    
    npm update express  # 更新模块
    
    npm ls  # 列出已安装的软件包
    
    npm search express  # 搜索模块
    
    -y 的含义：yes的意思，在init的时候省去了敲回车的步骤，生成的默认的package.json
    npm init -y # 创建模块
    
    内容类型排列的 Mime 类型列表 类型/子类型扩展名 
    npm install mime
    
    引入第三方模块mime（需求：判断文件mime类型）
    var mime=require('mime');
    
    var img = 'xxx.png';
    console.log(mime.getType(img));//获取类型
    console.log(mime.getExtension('image/png'));//获取后缀
    
    npm install jquery --nove-dev  # 安装jQuery
    
    npm install jquery --save-dev  # 开发环境
    
    全局安装vue-cli，命令行：
    npm install vue-cli -g
    vue -V
    @vue/cli 4.5.11
    
    全局安装webpack
    npm install webpack webpack-cli -g
    
    C:\Users\Administrator>webpack -v
    webpack: 5.63.0
    webpack-cli: 4.9.1
    webpack-dev-server not installed
    
    安装axios
    npm install --save axios 
    
    查看react最新版本
    npm info react
    npm info create-react-app
    npm install --save react@17.0.1

cnpm 查看

C:\Users\ASUS>cnpm -v
    cnpm@7.1.1 (C:\Users\ASUS\AppData\Roaming\nvm\v11.15.0\node_modules\cnpm\lib\parse_argv.js)
    npm@6.14.16 (C:\Users\ASUS\AppData\Roaming\nvm\v11.15.0\node_modules\cnpm\node_modules\npm\lib\npm.js)
    node@11.15.0 (C:\Program Files\nodejs\node.exe)
    npminstall@5.8.0 (C:\Users\ASUS\AppData\Roaming\nvm\v11.15.0\node_modules\cnpm\node_modules\npminstall\lib\index.js)
    prefix=C:\Program Files\nodejs
    win32 x64 10.0.19043
    registry=https://registry.npmmirror.com
    
    C:\Users\ASUS>

## Node.js REPL(交互式解释器) ##

Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境，类似 Window 系统的终端或 Unix/Linux shell，我们可以在终端中输入命令，并接收系统的响应。

Node 自带了交互式解释器，可以执行以下任务：

读取 - 读取用户输入，解析输入的 Javascript 数据结构并存储在内存中。

执行 - 执行输入的数据结构

打印 - 输出结果

循环 - 循环操作以上步骤直到用户两次按下 ctrl-c 按钮退出。

Node 的交互式解释器可以很好的调试 Javascript 代码。

开始学习 REPL

我们可以输入以下命令来启动 Node 的终端：

$ node
    >

R read 读取（读取用户输入的JS代码）
    E exec 执行（执行用户输入的js代码）
    P pint 打印（打印用户输入的JS代码）
    L loop 循环（后续所有js代码执行都会循环以上命令） 退出（按两下Ctrl+c）

## Axios 是一个基于 promise 的 HTTP 库 ##

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

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

header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
    //主要为跨域CORS配置的两大基本信息,Origin和headers
    header('Access-Control-Allow-Methods: POST, GET, DELETE,PUT,OPTIONS');//fetch设置header头才能获取PUT请求
    //接收header的Token
    header("Access-Control-Allow-Headers:Token");
    $arr=[
        'name'=>'sdf',
        'pwd'=>'123',
        'token'=>$_SERVER['HTTP_TOKEN']
    ];
    echo json_encode($arr,JSON_UNESCAPED_UNICODE);

`user.js`

<?php
    
    function json_back($data, $is_exit = true)
    {
        
        $callback = $_GET['callback'] ?? '';
        if ($callback) {
        
            echo '' . $callback ."(". json_encode($data, JSON_UNESCAPED_UNICODE).")";
        } else {
        
            echo json_encode($data, JSON_UNESCAPED_UNICODE);
        }
        if ($is_exit) exit();
    }
    $data = [
        'age'=>30,
        'name'=>'wg',
        'token'=>$_SERVER['HTTP_TOKEN'],
        'sex'=>'1'
    ];
    json_back($data);

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

### axios 响应结果 ###

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

### async/await 用法 ###

async/await 是一对的。  
![在这里插入图片描述][c56377f655de4a1d88c7afbcf93f7c5c.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]

## package.json 中 ~ 和 ^ 的区别 ##

"devDependencies": {
        
      "@vue/cli-plugin-babel": "~4.5.0",
      "@vue/cli-plugin-eslint": "~4.5.3",
      "@vue/cli-service": "~4.5.0",
      "babel-eslint": "^10.2.3",
      "babel-plugin-component": "^1.1.1",
      "eslint": "^6.7.2",
      "eslint-plugin-vue": "^6.2.2",
      "vue-template-compiler": "2.6.11"
    }

1、无前缀

安装指定版本号。

例如 “vue-template-compiler”: “2.6.11” ，表示安装指定的 2.6.11版；

2、~ 前缀

安装指定版本号的最新版，但不大于主版本号和次版本号。

例如`"@vue/cli-plugin-eslint": "~4.5.3"`。4 是主版本号，5 是次版本号，这两个是不变的。可以安装 4.5.3 或以上的最新版，如： `4.5.31、4.5.4、4.5.55...4.5.99`，但不能是`5.1.0、4.6.0`；

3、^ 前缀

安装指定版本号的最新版，但不大于主版本。

例如 `"babel-eslint": "^10.2.3"`。10 是主版本号，是不变的。可以安装 10.2.3 或以上的最新版，如：10.2.4、10.3.0，但不能是 11.1.0；

## npm i 和 npm install 的区别 ##

npm的帮助指令发现还是没区别，npm i 仅仅是 npm install 的简写：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]  
实际使用的区别点主要如下(windows下)：

1、用npm i安装的模块无法用npm uninstall删除，用npm uninstall i才卸载掉。

2、npm i会帮助检测与当前node版本最匹配的npm包版本号，并匹配出来相互依赖的npm包应该提升的版本号。

3、 部分npm包在当前node版本下无法使用，必须使用建议版本。

4、安装报错时 intall 肯定会出现 npm-debug.log 文件，npm i不一定。

## react 的 package.json 文件的 scripts ##

说明  
它里面记录了我们的运行脚本  
可以帮我们运行我们安装上来的依赖包

"scripts": {
      "start": "react-scripts start",        做开发
      "build": "react-scripts build",        做打包
      "test": "react-scripts test",          做测试
      "eject": "react-scripts eject"         把我们的配置解出来
    },

## npx ##

npm 从5.2版开始，增加了 npx 命令。  
Node 自带 npm 模块，所以可以直接使用 npx 命令。万一不能用，就要手动安装一下。

$ npm install -g npx

使用npx可以在命令行直接执行本地已安装的依赖包命令，不用在scripts脚本写入命令，也不用麻烦的去找本地脚本。

`npx webpack -v`

[09fc37afa9824e5eb90d8d5646965aa6.png]: https://img-blog.csdnimg.cn/09fc37afa9824e5eb90d8d5646965aa6.png
[c89f1a7f1bd04385ac9405e1a23d6f44.png]: https://img-blog.csdnimg.cn/c89f1a7f1bd04385ac9405e1a23d6f44.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/6c0d5897f369411cb2b25e1b30925732.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[5843ced067a4405db0c8be0b48b1cb70.png]: https://img-blog.csdnimg.cn/5843ced067a4405db0c8be0b48b1cb70.png
[c56377f655de4a1d88c7afbcf93f7c5c.png]: https://img-blog.csdnimg.cn/c56377f655de4a1d88c7afbcf93f7c5c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/1652ce425957411fb1193ef56a5eb509.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/df9017fcebcc4618907e0191232db930.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16