Node 常用_node最通用的版本

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

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

NPM版本控制

aplha 版  - 内测版
beta 版   - 公测版
rc 版     - 预览版
stable 版 - 用户可用
1
2
3
4

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
2

本地安装

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
1
2
3

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

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 是资源管理工具，可以切换国内服务器下载
1
2
3
4
5
6
7
8
9
10

内置核心模块

http服务
fs文件操作
url路径
path路径处理
电脑操作系统
1
2
3
4
5

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   			卸载
1
2
3
4
5
6

查看当前所有的node版本

nvm list

    15.11.0
    14.16.0
  * 14.15.5 (Currently using 64-bit executable)
1
2
3
4
5

显示所有可下载的版本

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    |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

安装指定的版本

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
1
2
3
4
5
6
7
8
9

使用特定版本

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

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>
1
2
3
4
5
6
7
8
9
10

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

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

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

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

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

打印 - 输出结果

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

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

开始学习 REPL

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

$ node
> 
1
2

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

Axios 是一个基于 promise 的 HTTP 库

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

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);
1
2
3
4
5
6
7
8
9
10
11
12

user.js

const axios = require('axios');

// axios.post('http://test.cc/aa/index.php', {
//     firstName: 'Fred',
//     lastName: 'Flintstone'
//   })
//   .then(function (response) {
//     // console.log(response.data);
//     const {name,sex,sex} = response.data;
//   })
//   .catch(function (error) {
//     console.log(error);
//   });


//async/await处理多个异步任务
//设置请求基本url地址
axios.defaults.baseURL="http://test.cc";
//配置请求头信息
axios.defaults.headers['Token']='token-value';

async function querydata(){
    var ret=await axios.get('/aa/index.php');
    return ret.data;
}

querydata().then(function(data){
    console.log(data);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<?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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

axios 响应结果

async/await 用法

async/await 是一对的。

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
2
3
4
5
6
7
8
9
10

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 的简写：

实际使用的区别点主要如下(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"         把我们的配置解出来
},
1
2
3
4
5
6

npx

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

$ npm install -g npx
1

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

npx webpack -v