node&npm&nrm&nvm

文章目录

nodejs

Nodejs 基础学习笔记

基于node的前端项目构建

node.js 安装详细步骤教程

Window下node安装以及配置

1、node.js 安装详细步骤教程

1、下载安装包

Node.js 官方网站下载:https://nodejs.org/en/

选择操作系统对应的包:

下载完成,安装包如下:

2、安装

打开安装,傻瓜式下一步即可:

选择安装位置,我这里装在D盘下:

安装成功,文件夹结构如下,并在上面安装过程中已自动配置了环境变量和安装好了npm包,此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号:

3、配置npm在安装全局模块时的路径和缓存cache的路径

因为在执行例如npm install webpack -g等命令全局安装的时候,默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中,不方便管理且占用C盘空间,如下图所示:

所以这里配置自定义的全局模块安装目录,在node.js安装目录下新建两个文件夹 node_global和node_cache,然后在cmd命令下执行如下两个命令:

npm config set prefix “D:\Program Files\nodejs\node_global”

npm config set cache “D:\Program Files\nodejs\node_cache”

执行成功。然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”, 值为“D:\Program Files\nodejs\node_modules”,如下图:

最后编辑用户变量里的Path,将相应npm的路径改为:D:\Program Files\nodejs\node_global,如下:

更改前:

更改后:

配置完成。

4、测试

在cmd命令下执行 npm install webpack -g 然后安装成功后可以看到自定义的两个文件夹已生效:

webpack 也已安装成功,执行 npm webpack -v 可以看到所安装webpack的版本号:

2、Window下node安装以及配置

在 Windows 下安装 Node.js 非常简单,你可以通过官方提供的安装程序或者使用多版本管理工具(如 NVM-Win)来进行安装。下面是两种方法的具体步骤:

1. 安装 Node.js程序
步骤如下:
  1. 访问官方网站
    访问 Node.js 官方网站: nodejs.org

  2. 选择版本

    • 选择 “LTS” 版本,这是长期支持版本,适合生产环境。
    • 或者选择 “Current” 版本,这是最新版本,包含最新的功能和改进。
  3. 下载安装程序
    根据你的 Windows 系统选择对应的安装文件(32位或64位)。

  4. 运行安装程序

    • 双击下载好的安装文件开始安装过程。
    • 在安装过程中,可以选择安装其他组件(如 npm 包管理器),默认情况下它们会被勾选上。
    • 也可以选择安装额外的应用程序,如 Node.js 附带的包管理器(npm)和 Node.js 附带的调试工具(npx)。
  5. 完成安装

    • 安装完成后,你可以通过打开命令提示符(cmd)或 PowerShell 输入 node -v 来验证 Node.js 是否正确安装。
    • 如果一切正常,它会显示当前 Node.js 的版本号。
    node -v
    
  6. 全局环境配置

    • 指定全局配置,把全局依赖安装到指定位置
    # 设置全局目录
    npm config set prefix <path>
    # 设置全局缓存目录
    npm config set cache <path>
    
    • 如果在局域网内,还可以通过代理访问互联网
    npm config set proxy <http://your-proxy-server:port>
    
示例命令:
2. 使用 NVM-Win 安装 Node.js

如果你需要管理多个 Node.js 版本,可以使用 NVM-Win(Node Version Manager for Windows)。

安装 NVM-Win:
  1. 下载 NVM-Win

    • 访问 GitHub 上的 NVM-Win 项目页面: nvm-windows
    • 选择最新版本的安装程序进行下载。
  2. 安装 NVM-Win

    • 运行下载的安装程序,按照提示完成安装。
  3. 重启命令提示符

    • 为了使 NVM-Win 生效,你需要重新启动命令提示符或 PowerShell。
    使用 NVM-Win 安装 Node.js:
    nvm list available
    nvm install 16.14.2
    nvm ls
    
3. 常用命令行:
  • nvm 版本管理工具
# 列出可用的node版本
nvm list available
# 安装指定版本node
nvm install 18.20.4
# 将某个版本设定为默认版本
nvm alias default 18.20.4
# 列出当前安装的node版本
nvm ls
  • npm node依赖管理工具(默认自带)
# 初始化项目, 创建package.json文件
npm init
# 安装依赖包
npm install <package-name>
# 全局安装依赖
npm install <package-name> -g
# 安装依赖包并将依赖添加到package.json的指定位置
npm install <package-name> --save-dev 或 npm i <package-name> -D
# 更新node包到最新版本
npm update <package-name>
# 查看包信息
npm info <package-name>
# 运行package.json当中scripts节点的脚本
npm run <script-name>
# 卸载依赖包
npm uninstall <package-name>

#-------------下面是和node环境配置相关的命令行-----------
# 列出所有配置项
npm config list
# 设置全局目录
npm config set prefix
# 设置全局缓存目录
npm config set cache
# 是否开启严格使用ssl访问(一般关闭)
npm config set strict-ssl false
# 修改仓库地址(一般指定私有仓库)
npm config set registry <registry-url>
# 设置http代理
npm config set proxy <http://your-proxy-server:port>
# 设置https代理
npm config set https-proxy <https://your-proxy-server:port>
# 获取某个配置项信息
npm config get <config-name>
# 删除某个配置项
npm config delete <config-name>
  • yarn 包依赖管理(如果觉得npm不是很好用的话)
# 初始化yarn项目
yarn init

# 添加依赖
yarn add <package>
# 添加全局依赖
yarn global add <package>
# 添加依赖, 并将依赖配置加入package.json
yarn add <package> --dev
yarn add <package> --latest
yarn add <package>@<version>
# 删除依赖
yarn remove <package>
# 列出已安装依赖
yarn list
yarn info <package>
# 查看哪些依赖可以更新(很有用)
yarn outdated

# 依赖更新
yarn upgrade <package>
yarn upgrade <package>@<version>
yarn upgrade-interactive

# 删除缓存
yarn cache clean
yarn cache clean <package>

# 其他
# 检查 yarn.lock 文件与 package.json 是否一致
yarn check
# 执行package.json当中定义的脚本
yarn run <script>

以上就是 Windows 下安装 Node.js 的基本步骤以及相关命令行工具(有个注意点:所有的命令行必须在window的终端上执行,有人安装了git之类的, 喜欢用git shell客户端执行,会导致有些包的执行出现问题)。

3、Nodejs 基础学习笔记

Node.js简介

Node.js 是一个能够在服务器端运行 JavaScript 的开放源代码、跨平台 JavaScript 运行环境。Node.js 由 Node.js 基金会持有和维护,并与 Linux 基金会有合作关系。Node.js 采用 Google 开发的 V8 运行代码,使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能,可优化应用程序的传输量和规模。这些技术通常用于数据密集的即时应用程序。

Node.js 大部分基本模块都用 JavaScript 语言编写。在 Node.js 出现之前,JavaScript 通常作为客户端程序设计语言使用,以 JavaScript 写出的程序常在用户的浏览器上运行。Node.js 的出现使 JavaScript 也能用于服务端编程。Node.js 含有一系列内置模块,使得程序可以脱离 Apache HTTP Server 或 IIS,作为独立服务器运行。

Node.js 特点

  1. 它是一个 JavaScript 运行环境。
  2. 依赖于 Chrome V8 引擎进行代码解释。
  3. 事件驱动:在 Node 中,客户端请求建立连接,提交数据等行为,会触发相应的事件。在 Node 中,在一个时刻,只能执行一个事件回调函数,但是在执行一个事件回调函数的中途,可以转而处理其他事件,然后返回继续执行原事件的回调函数。
  4. 非阻塞 I/O:Node.js 中采用了非阻塞型 I/O 机制,在执行了访问数据库的代码之后,将立即转而执行其后面的代码,把数据库返回结果的处理代码放在回调函数中,从而提高了程序的执行效率。
  5. 轻量可伸缩,适用于实时数据交互应用。
  6. 单线程:好处是减少内存开销,不用像多线程编程那样处处在意状态同步的问题。缺点是错误会引起整个应用退出。

Node.js 适用场景

我们从 Node.js的特点中可以知道,Node.js擅长I/O处理,不善于计算(单线程的缺点)。因此Node.js适用于,当应用程序需要处理大量并发的I/O时。而在向客户端发出响应之前,应用程序内部并不需要进行非常复杂的处理的时候,Node.js也非常适合与websocket配合,开发长连接的实时交互应用程序。比如:聊天室,博客系统,考试系统等。

更新npm模块和Nodejs

更新npm模块
npm update -g
更新nodejs自身
npm install -g node

Nodejs全局对象

JavaScript 中的全局对象是 window,而在 Node.js 中全局对象是 global,所有全局变量(除了global本身以外)都是global对象的属性,我们可以直接访问到 global 的属性。

下面介绍一些常用的全局变量和全局函数:

  1. __ filename全局变量表示当前正在执行的脚本的文件名。它将输出文件的绝对路径。比如创建一个filename-test.js文件,向其中写入:console.log(__filename);,使用node执行它即可得到该文件的绝对路径。

在这里插入图片描述

  1. __ dirname全局变量,表示当前执行脚本所在的目录。比如创建一个dirname-test.js文件,向其中写入代码console.log(__dirname),使用node执行它即可得到该文件所在的目录。

在这里插入图片描述

  1. setTimeout(cb, ms) 全局函数在指定的毫秒(ms)数后执行指定函数(cb),只执行一次函数。比如创建一个 st.js 的文件,输入以下代码:
function foo() {
    console.log("Hello, syl!");
}

setTimeout(foo, 3000);  // 3秒后执行foo()函数

851e3b79b1ac44f18ca4a9ba16526de0.png

  1. clearTimeout(t) 全局函数用于停止一个之前通过 setTimeout() 创建的定时器。 参数 t 是通过 setTimeout() 函数创建的定时器。比如清除上面案例的定时器:

在这里插入图片描述

  1. setInterval(cb, ms) 与 setTimeout(cb, ms) 类似,不同的是这个方法会不停的执行函数。直到 clearInterval() 被调用或窗口被关闭,也可以按 Ctrl+C 停止。

使用Nodejs创建第一个应用

新建一个server.js文件,引入require模块,创建第一个node应用:

var http = require('http');

http.createServer(function(request, response) {
    response.writeHead(200, {'Content-Type': 'text/plain'});    // 发送HTTP头部
    response.end('Hello World\n');  // 发送响应消息
}).listen(8080);    // 监听8080端口

console.log('Server running at http://127.0.0.1:8080')

Nodejs包

包用于管理多个模块及其依赖关系,可以对多个模块进行封装,包的根目录必须包含 package.json 文件。package.json 文件是 CommonJS 规范用于描述包的文件,符合 CommonJS 规范的 package.json 文件一般包含以下字段:

  1. name:包名。包名是唯一的,只能包含小写字母、数字和下划线。
  2. version:包版本号。
  3. description:包说明。
  4. keywords:关键字数组,用于搜索。
  5. homepage:项目主页。
  6. bugs:提交 bug 的地址。
  7. license:项目许可证。
  8. maintainers:项目维护者名单,是一个数组。
  9. contributors:项目贡献者名单,是一个数组。
  10. repositories:项目仓库托管地址,是一个数组。
  11. dependencies:项目的包依赖。
{
    "name": "First",
    "description": "First package.",
    "version": "0.1.0",
    "keywords": [
        "study",
        "nodejs"
     ],
    "licenses": [{
        "type": "Apache License v2",
        "url": "http://www.apache.org/licenses/apache2.html"
    }],
    "dependencies": { 
        "webkit": "1.2",
        "ssl": { 
            "gnutls": ["1.0", "2.0"],
            "openssl": "0.9.8"
        }
    }
}

如果想了解更多的npm命令,可以前往这里(https://www.npmjs.cn):

在这里插入图片描述

Nodejs模块

在 JavaScript 中,我们通常把 JavaScript 代码分成几个 js 文件,然后在浏览器中将这些 js 文件合并运行。但是在 Node.js 中,是以模块为单位来划分所有功能的,每一个模块对应一个 js 文件,每一个模块中定义的全局变量和函数的作用范围也被限定在这个模块之内,只有使用 exports 对象才能导出到外部使用。

Node.js官方提供了很多模块,这些模块分别实现了一种功能,如操作文件及文件系统的模块 fs,构建http服务的模块http,处理文件路径的模块path等,当然我们也可以自己编写模块。

使用模块

首先创建一个模块MyModule.js,

function foo() {
    console.log("Hello syl");
}

module.exports.foo = foo;   // 导出foo()函数

再新建一个index.js文件用于引入模块:

var hello = require('./MyModule.js');   // 使用require()引入模块

hello.foo();    // 调用模块hello内的函数foo()
核心模块

使用 require 加载模块,以’/’ 为前缀的模块是文件的绝对路径,‘./’ 为前缀的模块是相对于当前文件而言的。当没有以 ‘/’、‘./’ 或 ‘…/’ 开头来表示文件时,这个模块必须是一个核心模块或加载自 node_modules 目录。如果给定的路径不存在, require() 会抛出一个 code 属性为 ‘MODULE_NOT_FOUND’ 的 Error。

核心模块定义在 Node.js 源代码的 lib/ 目录下。require() 总是会优先加载核心模块。 例如,require('http') 始终返回内置的 HTTP 模块,即使有同名文件。

Nodejs中的函数

在 JavaScript 中,一个函数可以作为另一个函数的参数,毕竟函数名本身只是一个指针。Node.js 中函数的使用与 Javascript 类似。

在这里插入图片描述
在这里插入图片描述

Nodejs异步编程

Node.js 异步编程的直接体现就是回调。回调函数在完成任务后就会被调用,Node.js 中使用了大量的回调函数,Node.js 的所有 API 都支持回调函数。回调函数一般作为函数的最后一个参数出现。

阻塞代码实例

准备好test.txt文件后,使用如下代码读入文件:

var fs = require("fs");
var data = fs.readFileSync('test.txt');     // 同步读取文件,只有文件读取完后才能执行下一步操作

console.log(data.toString());
console.log("程序执行完毕!");

在这里插入图片描述

非阻塞代码

非阻塞代码主要采用了异步回调的方式。

将上述fs.js中的代码改为:

var fs = require("fs");
fs.readFile('test.txt', function(err, data) {
    if(err)
        return console.error(err);  // 打印错误消息
    console.log(data.toString());
})

console.log("程序执行完毕!");

在这里插入图片描述

注意,此时控制台打印的消息与之前使用阻塞读取的方式打印出的内容是相反的(因为异步读取不需要等待文件全部读取完,就可以直接进行下一步操作)。

Nodejs事件

大多数 Node.js 核心 API 构建于惯用的异步事件驱动架构,其中某些类型的对象(又称触发器,Emitter)会触发命名事件来调用函数(又称监听器,Listener)。

比如,fs.readStream 打开文件时会发出一个事件。可以通过 require("events");获得 event 模块。通常,事件名采用“驼峰法”命名。

EventEmitter类

所有能触发事件的对象都是 EventEmitter 类的实例。这些对象有一个 eventEmitter.on() 函数,用于将一个或多个函数绑定到命名事件上。当 EventEmitter 对象触发一个事件时,所有绑定在该事件上的函数都会被同步地调用。

添加监听器

使用emitter.on()为事件绑定一个监听器:

emitter.on(eventName, listener)

在这里插入图片描述

另外,我们通常看到的emitter.addListener(eventName, listener)emitter.on(eventName, listener) 的别名。

默认情况下,事件监听器会按照添加的顺序依次被调用。emitter.prependListener() 方法可将事件监听器添加到监听器数组的开头。
在这里插入图片描述

调用监听器

使用emitter.emit(eventName[, ...args])调用事件的监听器,调用的顺序正是监听器被绑定到事件上时的顺序。

在这里插入图片描述

只执行一次的监听器

使用前面介绍的eventEmitter.on(eventName, listener) 注册监听器时,监听器会在每次触发命名事件时被调用。如果事件被触发多次,那么监听器就也会被执行多次。

在这里插入图片描述

如果要注册一个只执行一次的监听器,则可以使用 eventEmitter.once(eventName, listener) 函数,它会注册最多可调用一次的监听器。当事件被触发时,监听器会先被注销,然后才开始调用。

在这里插入图片描述

移除监听器

使用 emitter.removeListener(eventName, listener) 移除监听器。

在这里插入图片描述

removeListener() 最多只会从监听器数组中移除一个我们指定的监听器,可以通过多次调用 removeListener() 的方式来一个个的移除我们需要移除掉的监听器。

error事件

当 EventEmitter 实例出错时,会触发 ‘error’ 事件。如果没有为 ‘error’ 事件注册监听器,则当 ‘error’ 事件触发时,会抛出错误、打印堆栈跟踪、并退出 Node.js 进程。

在这里插入图片描述

所以说,通常情况下,我们要为会触发 error 事件的对象设置监听器,避免遇到错误后导致整个程序崩溃。

在这里插入图片描述

Nodejs中http和fs模块

Http模块
createServer([requestListener]);

requestListener是一个绑定到request事件上的监听器,每次当服务器收到请求时,就会触发request事件,进而执行该监听器函数。

requestListener()函数包括两个参数——request和response,调用request对象的属性和方法就可以拿到所有 HTTP 请求的信息,操作 response 对象的方法,就可以把 HTTP 响应返回给浏览器。

使用response对象向客户端返回内容:

在这里插入图片描述

使用request对象的几个属性: 在这里插入图片描述

Fs模块

在 Node.js 中绝大部分需要在服务器运行期反复执行业务逻辑的代码,必须使用异步加载,否则,同步代码在执行时期,服务器将停止响应,因为 Node.js 是单线程。

服务器启动时如果需要读取配置文件,或者结束时需要写入到状态文件时,可以使用同步代码,因为这些代码只在启动和结束时执行一次,不影响服务器正常运行时的异步执行。

打开和关闭文件

使用open()异步打开文件:
在这里插入图片描述

上述代码回调函数中的fd是一个文件流操作对象,可以使用它来关闭文件,如fs.close(fd, callback);

使用fs.openSync()同步打开文件。

写入和读取文件内容

使用read()读取文件内容:

fs.read(fd, buffer, offset, length, position, callback);

fd: 使用fs.open() 打开文件时返回的文件描述符。
buffer:数据一次性写入的缓冲区。
offset:缓冲区中开始写入的偏移量,一般我们设为0length:是一个整数,指定我们要一次读取的字节数。
position:指定从文件中开始读取的位置。 如果 position 为 null,则从当前文件位置读取数据,并更新文件读取指针位置。
callback:回调函数,有三个参数 err, bytesRead, buffer。err 为错误信息, bytesRead 表示读取的字节数,buffer 为缓冲区对象。

在这里插入图片描述

使用write()向文件写入内容:

fs.write(fd, buffer, offset, length, position, callback);

可见,write()所需的参数和open()一样,唯一不同的是open()中的buf指的是存储从文件中读取到的数据的缓冲区,而write()中的buf存储的是即将写入到文件的内容。
在这里插入图片描述

4、基于node的前端项目构建

概述

前端项目构建参数涉及多个方面,包括项目结构、配置文件、依赖管理、构建工具等。以下是对前端项目构建参数的详细说明:

一、项目结构参数
  1. src:源代码目录,通常包含项目的所有前端代码,如JavaScript、CSS、HTML等。

    • assets:静态资源存放目录,如图片、字体、样式文件等。
    • components:公共组件存放目录,如按钮、输入框、表格等可复用的UI组件。
    • views:页面视图目录,存放不同页面的模板文件。
    • router:路由配置文件,定义前端页面的路由规则。
    • store:状态管理库(如Vuex)的配置文件,用于管理全局状态。
  2. public:公共文件目录,通常存放一些不需要经过构建处理的文件,如favicon.ico、robots.txt等。

  3. config:配置文件目录,通常包含一些与构建、开发相关的配置文件,如webpack.config.js、vue.config.js等。

二、配置文件参数
  1. package.json:项目的配置文件,包含项目的依赖信息、脚本命令等。

    • dependencies:项目所需的依赖包列表。
    • devDependencies:项目开发所需的依赖包列表,这些依赖包在生产环境中不需要。
    • scripts:自定义脚本命令,如启动开发服务器、构建生产环境代码等。
  2. vue.config.js(Vue CLI项目):Vue CLI的配置文件,用于自定义Vue项目的构建行为。

    • transpileDependencies:需要转译的依赖包列表。
    • devServer:开发服务器的配置选项,如端口号、代理设置等。
    • chainWebpack:通过链式操作自定义webpack配置。
  3. webpack.config.js(Webpack项目):Webpack的配置文件,用于定义项目的构建流程。

    • entry:项目的入口文件。
    • output:构建后文件的输出目录和文件名。
    • module:定义如何处理不同类型的文件,如JavaScript、CSS、图片等。
    • plugins:用于执行范围更广的任务的插件列表,如压缩代码、生成HTML文件等。
三、依赖管理参数

前端项目通常使用npm(Node Package Manager)或yarn作为依赖管理工具。这些工具允许你安装、更新和删除项目所需的依赖包。

  1. npm

    • install:安装依赖包。
    • update:更新依赖包到最新版本。
    • uninstall:删除依赖包。
  2. yarn

    • add:添加依赖包。
    • upgrade:更新依赖包到最新版本。
    • remove:删除依赖包。
四、构建工具参数

前端项目构建通常使用Webpack、Vite等构建工具。这些工具允许你自动化地打包、压缩和优化前端代码。

  1. Webpack

    • mode:构建模式,可以是"development"或"production"。
    • devtool:用于控制如何生成source map,以便在调试时能够定位到原始源代码。
    • optimization:用于定义代码分割、压缩等优化选项。
  2. Vite

    • root:项目根目录。
    • base:开发服务器的基础路径。
    • build:构建配置选项,如输出目录、压缩代码等。
五、其他参数
  1. 端口号:开发服务器监听的端口号,可以通过配置vue.config.js或webpack.config.js中的devServer选项来设置。
  2. 代理设置:当开发服务器和后端服务器不在同一个域名下时,可以通过配置代理来解决跨域问题。
  3. 环境变量:可以通过定义环境变量来区分开发环境、测试环境和生产环境,从而在构建时根据不同的环境执行不同的代码或配置。

多环境构建

总之,前端项目构建参数涉及多个方面,需要根据项目的具体需求和构建工具来选择合适的参数进行配置。在配置过程中,建议遵循“约定大于规范”的原则,以确保项目的可维护性和可扩展性。
在前端开发中,特别是使用Vue CLI等工具时,多环境包构建是一个常见的需求。--mode参数在这个过程中起到了关键作用,它允许开发者为不同的构
建环境指定不同的配置。以下是对前端多环境包构建中使用--mode的详细解释:

一、--mode参数的作用

--mode参数用于指定Vue CLI构建时的模式。不同的模式可以对应不同的环境变量和配置,从而实现多环境构建。例如,可以创建开发环境、测试环境和生产环境等不同的构建模式。

二、如何使用--mode参数
  1. package.json中配置脚本

    首先,需要在项目的package.json文件中为不同的构建环境配置脚本。例如:

    "scripts": {
      "serve:dev": "vue-cli-service serve --mode dev",
      "serve:prod": "vue-cli-service serve --mode prod",
      "build:dev": "vue-cli-service build --mode dev",
      "build:prod": "vue-cli-service build --mode prod"
    }
    

    这样,就可以通过运行npm run serve:devnpm run serve:prodnpm run build:devnpm run build:prod等命令来启动或构建不同环境的项目。

  2. 创建环境配置文件

    接下来,需要在项目根目录下创建对应的环境配置文件。这些文件通常以.env.为前缀,后跟模式名称。例如,.env.dev用于开发环境,.env.prod用于生产环境。在这些文件中,可以定义不同的环境变量。例如:

    # .env.dev
    NODE_ENV='development'
    VUE_APP_API_URL='http://dev.api.example.com'
    
    # .env.prod
    NODE_ENV='production'
    VUE_APP_API_URL='http://prod.api.example.com'
    
  3. 在代码中使用环境变量

    在Vue项目的代码中,可以通过process.env来访问这些环境变量。例如,可以在main.js或组件中打印当前的环境变量:

    console.log(process.env.NODE_ENV);
    console.log(process.env.VUE_APP_API_URL);
    
三、注意事项
  1. 环境变量的命名

    在环境配置文件中,环境变量的命名需要遵循一定的规则。NODE_ENVBASE_URL是Vue CLI内置的环境变量,可以直接使用。自定义的环境变量需要以VUE_APP_为前缀,否则在构建过程中可能会被忽略。

  2. 环境变量的合并

    在构建过程中,Vue CLI会将.env文件和对应模式的环境配置文件(如.env.dev.env.prod)合并。如果两个文件中定义了相同的环境变量,则以模式环境配置文件中的值为准。

  3. 跨平台兼容性

    为了确保环境变量在不同操作系统上的兼容性,建议使用cross-env等工具来设置环境变量。这样可以避免在Windows和macOS等操作系统上因环境变量设置方式的不同而导致的问题。

综上所述,使用--mode参数可以方便地实现前端多环境包构建。通过配置package.json脚本、创建环境配置文件和在代码中使用环境变量等步骤,可以轻松地管理和切换不同的构建环境。

npm

npm所有的命令官方中文文档

npm常用命令详解

npm命令行详细说明
npm 介绍 、常用指令

1、npm常用命令详解

npm(Node Package Manager)是Node.js的包管理器,它提供了一种简单的方式来安装、更新和管理Node.js的包。npm是Node.js生态系统中不可或缺的一部分,它拥有庞大的包库,几乎可以满足开发者的所有需求。本文将详细介绍npm的常用命令,帮助开发者更高效地使用npm进行项目开发。

1. npm init

npm init 命令用于初始化一个新的npm项目。它会引导你创建一个package.json文件,其中包含了项目的基本信息和依赖项。这个文件是项目的心脏,记录了项目的元数据和依赖关系。

mkdir myproject
cd myproject
npm init

运行npm init后,你会被提示输入项目的名称、版本、描述、入口文件等信息。如果你不确定某些信息,可以按回车键接受默认值。

2. npm install

npm install 命令用于安装新的包。它可以安装来自npm仓库的任何包,并将它们添加到项目的依赖列表中。

2.1 全局安装

如果你想在全局范围内安装一个包,可以使用-g--global标志。

npm install -g <package_name>

例如,全局安装Express框架:

npm install -g express
2.2 本地安装

如果你想在项目中安装一个包,只需省略-g标志。

npm install <package_name>

这将安装包并将其添加到package.json文件的dependencies列表中。

2.3 作为开发依赖安装

如果你安装的包仅用于开发环境,例如测试框架,你可以使用--save-dev-D标志。

npm install --save-dev <package_name>

这将把包添加到package.json文件的devDependencies列表中。

2.4 保存安装的包

默认情况下,npm install会将安装的包保存到package.json文件中。如果你想避免自动保存,可以使用--no-save标志。

npm install <package_name> --no-save

3. npm uninstall

npm uninstall 命令用于从项目中移除依赖包。它会从package.json文件中删除指定的包,并卸载它。

npm uninstall <package_name>

如果你想同时移除全局包和本地包,可以使用--save标志。

npm uninstall --save <package_name>

4. npm update

npm update 命令用于更新项目中的依赖包。它可以更新所有依赖包,也可以指定更新某个特定的包。

4.1 更新所有依赖

更新所有依赖到最新版本:

npm update
4.2 更新特定依赖

更新特定的包到最新版本:

npm update <package_name>

5. npm list

npm list 命令用于列出当前项目中安装的包及其依赖关系。

npm list

如果你想查看全局安装的包列表,可以使用--global标志。

npm list --global

6. npm search

npm search 命令用于搜索npm仓库中的包。

npm search <query>

你可以通过这个命令来查找具有特定功能或满足特定条件的包。

7. npm view

npm view 命令用于查看指定包的详细信息,包括版本、依赖、描述等。

npm view <package_name>

8. npm ls

npm ls 命令用于列出当前项目中安装的包的版本树。

npm ls

这个命令可以帮助你理解包之间的依赖关系。

9. npm cache

npm cache 命令用于管理npm的缓存。有时候,清理缓存可以解决一些安装问题。

9.1 清理缓存

清理npm缓存:

npm cache clean --force

10. npm config

npm config 命令用于设置或查看npm的配置选项。

10.1 设置配置

设置一个新的配置选项:

npm config set <key> <value>

例如,设置npm的镜像源为淘宝镜像:

npm config set registry https://registry.npm.taobao.org
10.2 查看配置

查看所有的npm配置:

npm config list

11. npm help

npm help 命令用于获取npm命令的帮助信息。

npm help <command>

如果你不确定如何使用某个命令,可以使用这个命令来获取帮助。

12. npm version

npm version 命令用于修改package.json文件中的版本号。

12.1 增加版本号

增加版本号:

npm version <new_version>

或者使用预设的版本格式(major, minor, patch):

npm version major
npm version minor
npm version patch
12.2 查看版本号

查看当前的版本号:

npm version

13. npm publish

npm publish 命令用于将你的包发布到npm仓库。

npm publish

在发布之前,确保你已经注册了npm账号,并且package.json文件中的信息是完整的。

14. npm login

npm login 命令用于登录npm账号。

npm login

登录后,你就可以发布包或修改已有的包信息。

15. npm whoami

npm whoami 命令用于查看当前登录的npm账号信息。

npm whoami

16. npm test

npm test 命令用于运行项目的测试脚本。在package.jsonscripts部分定义测试脚本后,你可以使用此命令来执行测试。

npm test

17. npm start

npm start 命令用于启动一个Node.js应用程序。在package.jsonscripts部分定义启动脚本后,你可以使用此命令来运行应用程序。

npm start

18. npm run

npm run 命令用于运行在package.json文件的scripts部分定义的脚本。你可以定义任何自定义脚本,并使用npm run来执行它们。

npm run <script_name>

19. npm pack

npm pack 命令用于打包项目中的包,生成一个tarball文件,用于分发或安装。

npm pack

20. npm dedupe

npm dedupe 命令用于减少依赖项的冗余,优化项目的依赖树。

npm dedupe

21. npm outdated

npm outdated 命令用于检查项目中过时的依赖包。

npm outdated

22. npm audit

npm audit 命令用于检查项目中的安全漏洞。

npm audit

运行npm audit fix可以自动修复一些已知的安全问题。

23. npm ci

npm ci 命令用于在连续集成环境中安装项目依赖。它会严格按照package-lock.json文件中的版本安装依赖,确保构建的一致性。

npm ci

24. npm link

npm link 命令用于创建一个符号链接,将本地的包链接到全局npm环境中。

npm link

这在本地开发和测试自己的包时非常有用。

25. npm rebuild

npm rebuild 命令用于重建所有的依赖包,解决由于更新npm或node版本导致的依赖问题。

npm rebuild

26. npm doctor

npm doctor 命令用于检查并修复npm环境中的常见问题。

npm doctor

27. npm config get

npm config get 命令用于获取一个或多个npm配置项的值。

npm config get <key>

28. npm version

npm version 命令用于修改package.json中的版本号,并同时更新package-lock.json

28.1 版本号升级
npm version major
npm version minor
npm version patch
28.2 手动设置版本号
npm version 1.0.0

29. npm publish --tag

npm publish --tag 命令允许你为发布的包指定一个标签,例如latestnext

npm publish --tag next

30. npm install --save-exact

npm install --save-exact 命令用于安装特定版本的包,并且精确地保存在package.json中,不使用版本范围。

npm install --save-exact <package_name>@<version>

31. npm cache verify

npm cache verify 命令用于验证缓存的完整性。

npm cache verify

32. npm unpublish

npm unpublish 命令用于从npm仓库中删除一个包。

npm unpublish <package_name>@<version>

33. npm view --scripts

npm view --scripts 命令用于查看一个包的scripts定义。

npm view <package_name> --scripts

34. npm set

npm set 命令用于设置多个npm配置项。

npm set <key> <value> <value> ...

35. npm get

npm get 命令用于获取单个npm配置项的值。

npm get <key>

36. npm owner

npm owner 命令用于管理包的所有权。

36.1 添加一个新所有者
npm owner add <user> <package_name>
36.2 移除一个所有者
npm owner remove <user> <package_name>

37. npm star

npm star 命令用于收藏一个包。

npm star <package_name>

38. npm unstar

npm unstar 命令用于取消收藏一个包。

npm unstar <package_name>

39. npm login

npm login 命令用于登录到npm。

npm login

40. npm logout

npm logout 命令用于登出npm。

npm logout

41. npm access

npm access 命令用于设置或修复包的访问权限。

41.1 为包设置访问级别
npm access public <package_name>
npm access restricted <package_name>
41.2 列出包的访问权限
npm access list <package_name>

42. npm token

npm token 命令用于创建或查看npm访问令牌。

42.1 创建新的访问令牌
npm token create
42.2 查看现有的访问令牌
npm token list

43. npm dist-tag

npm dist-tag 命令用于管理包的分发标签。

43.1 设置分发标签
npm dist-tag add <package_name>@<version> latest
43.2 列出所有的分发标签
npm dist-tag ls <package_name>

44. npm team

npm team 命令用于管理组织团队和成员。

44.1 列出团队成员
npm team members <team_name>
44.2 添加成员到团队
npm team add <user> <team_name>

45. npm hook

npm hook 命令用于管理webhook。

45.1 列出webhook
npm hook ls
45.2 添加webhook
npm hook create <url> [events]

46. npm scope

npm scope 命令用于管理命名空间。

46.1 创建新的命名空间
npm scope create <scope>
46.2 列出所有的命名空间
npm scope list

47. npm adduser

npm adduser 命令用于创建一个新的npm用户账户或添加一个已有的账户到本地配置。

npm adduser

48. npm edit

npm edit 命令用于编辑一个包的文档。

npm edit <package_name>

49. npm explore

npm explore 命令用于在npm仓库中浏览包的详细信息。

npm explore <package_name>

50. npm fund

npm fund 命令用于列出项目依赖的开源项目的资金信息。

npm fund

51. npm profile

npm profile 命令用于查看或编辑npm用户资料。

51.1 查看用户资料
npm profile get <user>
51.2 编辑用户资料
npm profile set <key> <value>

52. npm star

npm star 命令用于收藏一个包。

npm star <package_name>

53. npm unstar

npm unstar 命令用于取消收藏一个包。

npm unstar <package_name>

54. npm get

npm get 命令用于获取npm配置项的值。

55. npm set

npm set 命令用于设置npm配置项的值。

56. npm whoami

npm whoami 命令用于查看当前登录的npm用户。

57. npm config

npm config 命令用于设置或查看npm配置项。

58. npm help-search

npm help-search 命令用于搜索npm文档。

59. npm install-test

npm install-test 命令用于安装包并运行测试。

60. npm link

npm link 命令用于创建一个符号链接,将本地的包链接到全局npm环境中。

61. npm outdated

npm outdated 命令用于检查项目中过时的依赖包。

62. npm owner

npm owner 命令用于管理包的所有权。

63. npm publish

npm publish 命令用于将你的包发布到npm仓库。

64. npm run

npm run 命令用于运行在package.json文件的scripts部分定义的脚本。

65. npm search

npm search 命令用于搜索npm仓库中的包。

66. npm set

npm set 命令用于设置npm配置项。

67. npm shrinkwrap

npm shrinkwrap 命令用于创建一个npm-shrinkwrap.json文件,用于锁定依赖的版本。

69. npm start

npm start 命令用于启动一个Node.js应用程序。

70. npm stop

npm stop 命令用于停止正在运行的npm进程。

71. npm test

npm test 命令用于运行项目的测试脚本。

72. npm unpublish

npm unpublish 命令用于从npm仓库中删除一个包。

73. npm view

npm view 命令用于查看指定包的详细信息。

74. npm whoami

npm whoami 命令用于查看当前登录的npm用户。

75. npm install

npm install 命令用于安装新的包。

76. npm uninstall

npm uninstall 命令用于从项目中移除依赖包。

77. npm update

npm update 命令用于更新项目中的依赖包。

78. npm version

npm version 命令用于修改package.json中的版本号。

79. npm config

npm config 命令用于设置或查看npm配置项。

80. npm help

npm help 命令用于获取npm命令的帮助信息。

81. npm init

npm init 命令用于初始化一个新的npm项目。

82. npm pack

npm pack 命令用于打包项目中的包。

83. npm dedupe

npm dedupe 命令用于减少依赖项的冗余。

84. npm audit

npm audit 命令用于检查项目中的安全漏洞。

85. npm ci

npm ci 命令用于在连续集成环境中安装项目依赖。

86. npm link

npm link 命令用于创建一个符号链接,将本地的包链接到全局npm环境中。

87. npm rebuild

npm rebuild 命令用于重建所有的依赖包。

88. npm doctor

npm doctor 命令用于检查并修复npm环境中的常见问题。

89. npm config get

npm config get 命令用于获取一个或多个npm配置项的值。

2、npm命令行详细说明

概述

npm(全称Node Package Manager)是Node.js的包管理工具,以下是关于npm的详细介绍:

一、定义与功能

npm是Node.js的默认包管理工具,它提供了一个模块仓库,允许开发人员从仓库中下载已发布的模块到本地,并可以将自己开发的模块发布到仓库中供他人使用。npm的主要功能包括:

  1. 包安装和管理:通过npm,用户可以方便地安装、更新、删除JavaScript包。
  2. 依赖管理:npm能够管理项目的依赖关系,确保项目的稳定性和一致性。
  3. 包发布和管理:开发者可以使用npm发布自己的包到npm注册表,并管理自己的包。
  4. 脚本执行:npm允许开发者在package.json中定义脚本,并通过npm运行这些脚本,从而简化开发流程。
二、基本命令

npm提供了一系列命令行工具,用于执行各种包管理操作。以下是一些常用的npm命令:

  1. npm install:安装包到当前项目的node_modules目录,并更新package.jsonpackage-lock.json文件。
  2. npm uninstall:卸载已安装的包。
  3. npm update:更新项目中的包到最新版本。
  4. npm list:列出已安装的包及其依赖关系。
  5. npm init:初始化一个新的npm项目,并生成package.json文件。
  6. npm publish:将包发布到npm注册表。
  7. npm run:运行package.json中定义的脚本。
三、配置文件与注册表
  1. 配置文件:npm的配置文件为~/.npmrc或项目根目录下的.npmrc文件。这些文件用于存储npm的配置信息,如注册表地址、全局安装包的路径、代理服务器地址等。
  2. 注册表:npm registry是npm包的存储和分发中心。通过registry,开发者可以发布、发现和安装npm包。常用的npm registry有npm官方注册表(https://registry.npmjs.org/)和淘宝npm镜像(https://registry.npm.taobao.org/)等。
四、应用场景

npm在JavaScript开发中有着广泛的应用场景,包括但不限于:

  1. Web开发:使用npm安装前端框架(如React、Vue.js、Angular)、构建工具(如Webpack、Gulp)、开发服务器等。
  2. Node.js应用:管理Node.js项目的依赖关系,执行各种脚本和任务,如安装中间件、运行测试等。
  3. 前端工程化:自动化构建、测试和部署等任务,使用npm安装构建工具、测试框架和部署工具。
  4. 包开发:创建、测试和发布自己的npm包,供其他开发者使用。
五、高级特性

npm还提供了一些高级特性和使用技巧,如:

  1. npm Workspaces:允许在一个package.json文件中管理多个项目,简化开发流程。
  2. npm ci:在持续集成(CI)环境中使用,提供更快的安装速度,并且只安装package-lock.jsonnpm-shrinkwrap.json中列出的依赖。
  3. npm Outdated:检查哪些包已经过时,以便及时更新。
  4. npm Link:在开发多个包时,创建符号链接以共享代码。
  5. npm Deprecate:弃用一个包,并给出自定义的弃用理由。
  6. npm Access:管理包的访问权限,如设置为公开或受限。

综上所述,npm是JavaScript开发中不可或缺的工具之一,为开发者提供了高效、灵活和可靠的包管理解决方案。

环境设置

npm(Node Package Manager)的环境相关配置通常涉及设置镜像源、全局依赖存储路径、缓存路径等。以下是一些常用的npm环境配置命令行:

1. 设置镜像源

由于npm默认的镜像源在国外,有时会导致下载速度较慢。为了提高下载速度,可以配置使用国内的镜像源,如阿里镜像、腾讯镜像、华为镜像等。

  • 配置使用阿里镜像:
npm config set registry https://registry.npmmirror.com
  • 配置使用腾讯镜像:
npm config set registry https://mirrors.cloud.tencent.com/npm/
  • 配置使用华为镜像:
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
  • 恢复到npm官方源:
npm config set registry https://registry.npmjs.org/
  • 查看当前registry的配置:
npm config get registry

*登录到仓库

npm login
2. 配置全局依赖存储路径

npm的全局依赖默认安装在系统的某个特定目录下。为了管理方便,可以配置一个自定义的全局依赖存储路径。

  • 配置全局依赖存储路径(例如D:\GlobalNodeModules):
npm config set prefix "D:\GlobalNodeModules"
  • 查看当前的全局依赖存储路径:
npm config get prefix
3. 配置缓存路径

npm会将下载的包存储在本地缓存中,以便在之后的安装过程中重复使用,避免重复下载。可以配置一个自定义的缓存路径。

  • 配置缓存路径(例如D:\npm_repository\npm-cache):
npm config set cache "D:\npm_repository\npm-cache"
  • 查看当前的缓存路径:
npm config get cache
4. 查看所有配置

要查看npm的所有配置信息,可以使用以下命令:

npm config list
5. 清除缓存

有时需要清除npm的本地缓存,可以使用以下命令:

npm cache clean --force  # 旧版npm使用
npm cache verify         # 验证缓存数据的完整性,并尝试修复任何问题
npm cache clean --all    # 新版npm使用,清除所有缓存数据

注意:npm cache clean --force命令在新版npm中可能已经被弃用,建议使用npm cache clean --allnpm cache verify来管理缓存。

6. 升级npm版本

如果node中自带的npm版本过低,可以升级到最新版本以提高性能和安全性。

  • 查看当前npm版本:
npm -v
  • 升级到最新版本:
npm install npm@latest -g

以上是一些常用的npm环境配置命令行,它们可以帮助你更好地管理和优化npm的使用环境。

npm组件打包

在npm(Node Package Manager)中,包构建命令通常指的是用于创建、打包和发布npm包的命令。以下是一些与npm包构建相关的常用命令:

1. 初始化项目
  • npm init

    • 功能:初始化一个新的npm项目,并生成package.json文件。这个文件包含了项目的元数据,如包名、版本、描述、入口文件等,以及项目的依赖关系。
    • 使用方法:在项目目录下运行npm init,然后按照提示输入相关信息,或者使用-y参数快速生成包含默认值的package.json文件。
2. 安装依赖
  • npm install

    • 功能:安装项目所需的依赖包。这些依赖包会被安装在node_modules目录下,并在package.json文件的dependenciesdevDependencies字段中列出。
    • 使用方法:运行npm install <package-name>来安装指定的包,或者使用--save(或-S)参数将其添加到dependencies中,使用--save-dev(或-D)参数将其添加到devDependencies中。
3. 构建脚本
  • npm run

    • 功能:运行package.json文件中定义的脚本。这些脚本可以用于构建、测试、启动项目等任务。
    • 使用方法:在package.jsonscripts字段中定义脚本,然后运行npm run <script-name>来执行该脚本。例如,可以定义一个名为build的脚本,用于构建项目,然后运行npm run build来执行构建任务。
4. 打包项目
  • npm pack

    • 功能:打包当前项目,生成一个.tgz格式的压缩包。这个压缩包包含了项目的所有内容和依赖信息,可以用于发布到npm仓库或其他地方。
    • 使用方法:在项目目录下运行npm pack命令。
5. 发布包
  • npm publish
    • 功能:将当前项目发布到npm仓库中。在发布之前,需要确保已经登录了npm账号,并且package.json文件中的信息完整无误。
    • 使用方法:在项目目录下运行npm publish命令。如果之前已经发布过相同版本的包,需要先更新版本号或撤销之前的发布。
6. 其他常用命令
  • npm version

    • 功能:更新package.json文件中的版本号,并创建一个新的版本提交(git commit)。这个命令通常用于在发布新版本之前更新版本号。
    • 使用方法:运行npm version <newversion>来更新版本号,其中<newversion>是新的版本号(如1.0.1)。
  • npm audit

    • 功能:检查项目依赖中是否存在已知的安全漏洞,并给出修复建议。
    • 使用方法:在项目目录下运行npm audit命令。
  • npm outdated

    • 功能:列出当前项目中需要更新的依赖包及其最新版本。
    • 使用方法:在项目目录下运行npm outdated命令。
  • npm uninstall

    • 功能:卸载项目中的依赖包。
    • 使用方法:运行npm uninstall <package-name>来卸载指定的包。
总结

npm包构建命令涵盖了从项目初始化、依赖安装、构建脚本定义、项目打包到发布包等一系列操作。熟练掌握这些命令对于开发和管理npm包至关重要。在使用这些命令时,建议查阅npm的官方文档或帮助信息,以获取更详细和最新的说明。

项目构建相关

npm(Node Package Manager)在项目构建中扮演着至关重要的角色,提供了一系列命令行工具来管理项目依赖、运行脚本、发布包等。以下是一些与npm项目构建相关的常用命令行:

1. 初始化项目
  • npm init
    • 功能:创建一个新的package.json文件,该文件是Node.js项目的核心配置文件。
    • 参数:通过一系列交互式问题,用户可以定义项目的基本信息,如名称、版本、描述、主入口文件等。
    • 快速创建:使用-y参数可以快速创建并接受默认配置,例如npm init -y
2. 安装依赖
  • npm install
    • 功能:安装项目依赖的所有包,这些包会被添加到node_modules文件夹中,并在package.jsondependencies字段中记录。
    • 安装指定包:npm install <package>,其中<package>是包的名称。
    • 安装并保存为生产依赖:npm install <package> --save(或简写为-S),将包作为生产依赖添加到dependencies字段。
    • 安装并保存为开发依赖:npm install <package> --save-dev(或简写为-D),将包作为开发依赖添加到devDependencies字段。
3. 更新依赖
  • npm update
    • 功能:更新项目依赖的所有包到最新兼容版本。
    • 更新指定包:npm update <package>,其中<package>是包的名称。
4. 查看依赖
  • npm list
    • 功能:列出项目依赖的所有包。
    • 查看指定包:npm list <package>,其中<package>是包的名称。
    • 查看全局安装的包:npm list -g
5. 卸载依赖
  • npm uninstall
    • 功能:卸载本地依赖。
    • 卸载指定包:npm uninstall <package>(或简写为npm rm <package>),其中<package>是包的名称。
    • package.json中移除对应依赖记录:可以添加--save(或-S)或--save-dev(或-D)参数以确定是从哪个依赖列表中移除。
    • 卸载全局包:npm uninstall -g <package>,其中<package>是包的名称。
6. 运行脚本
  • npm run
    • 功能:运行package.json中定义的脚本。
    • 示例:在Vue项目中,npm run serve用于启动开发服务器,npm run build用于构建生产环境的静态资源。
7. 自定义脚本
  • package.json中添加脚本

    • 可以在package.jsonscripts字段中定义自定义脚本,例如:

      "scripts": {
        "build": "npm run build:css && npm run build:js",
        "build:css": "node-sass src/styles/main.scss dist/styles/main.css",
        "build:js": "babel src/js --out-dir dist/js"
      }
      
    • 然后通过npm run <script-name>命令来运行这些脚本,例如npm run build

8. 发布包
  • npm publish
    • 功能:将包发布到npm注册表。
    • 前提:需要先在npm上注册账号并登录,同时确保package.json中的信息完整且正确。
9. 其他常用命令
  • npm outdated:检查项目依赖的包是否有更新。
  • npm config ls:查看当前npm的配置信息。
  • npm config set key value:设置npm的配置项,例如设置默认项目作者名称npm config set init-author-name "Your Name"
  • npm search :搜索npm仓库中的包。
  • npm view :查看特定包的信息。

这些命令行工具是npm项目构建过程中的基础,熟练掌握它们将大大提高开发效率和项目管理的便捷性。

3、npm 介绍 、常用指令

一、什么是 npm

  • 全称:Node Package Manager

  • npm 是一个 随 node 一起安装的 node包管理分发工具

  • 通过npm命令可以实现nodejs模块的安装与卸载

  • npm 官网

二、npm 使用场景

  • (1)允许用户从npm服务器:下载 第三方包 到本地

  • (2)允许用户从npm服务器:下载 并 安装 别人编写的 命令行程序 到本地

  • (3)允许用户:将自己编写的 npm包命令行程序 上传到npm服务器

三、npm 基础命令

  • npm是和Node.js一起发布的,只要安装了Node.js,npm也安装好了
1. 检测 npm 是否安装成功
  • 命令:npm -v
2. 更新 npm
  • 命令:npm install npm -g
3. 查看 当前包安装目录
  • 命令:npm root
4. 查看 全局包安装目录
  • 命令:npm root -g

四、使用 npm 安装模块

1. 本地安装
  • 命令:npm install <Module Name> 安装模块 最新版本,不记录在 package.json 中

  • 命令:npm install <Module Name>@版本号 安装模块 指定版本,不记录在 package.json 中

  • 命令:npm install 模块名 --save 安装模块 最新版本,记录在 package.json 的生产环境中

  • 命令:npm install 模块名 --save-dev 安装模块 最新版本,记录在 package.json 的开发环境中

  • 安装细节:

    • (1)上述安装命令,会将 安装包放在 ./node_modules 下;如果没有 node_modules 目录,会在当前执行 npm 命令的目录下生成 node_modules 文件夹

      • (2)安装之前 会检查:node_module 中是否已经存在 要安装的模块

        • 如果 本地存在 即使 不是最新版本 也不再安装了

        • 如果需要 强制安装: npm install 模块名 --force

2. 全局安装
  • 命令:npm install <Module Name> -g

  • 将安装包放在 /usr/local/lib/node_modules 下或者你 node 的安装目录

  • 全局包:可以直接在命令行里使用;但不建议安装全局包

3. 查看 模块 版本
  • 前提: 需要在 node_modules 同级目录下 执行如下命令,才能查看 模块的版本号

  • 命令:npm list <Module Name>

4. 更新 模块
  • 前提: 需要在 node_modules 同级目录下 执行如下命令,才能更新 模块

  • 命令:npm update <Module Name>

  • 命令:npm update <Module Name> -g 更新全局中指定模块

5. 卸载 / 移除 模块
  • 前提: 需要在 node_modules 同级目录下 执行如下命令,才能卸载 模块

  • 命令:npm uninstall <Module Name> 卸载模块,不删除 package.json 中的记录

  • 命令:npm uninstall 模块名 --save 卸载模块,删除 package.json 生产环境中的记录

  • 命令:npm uninstall 模块名 --save-dev 卸载模块,删除 package.json 开发环境中的记录

  • 移除命令:npm remove -g 模块名 全局卸载模块

五、创建 模块 / 项目

1. 初始化项目 命令
  • 命令:npm init

  • 执行该命令,会自动生成 package.json 文件

2. 项目中 package.json 必不可少
  • 位置: 位于项目的根目录下

  • 生成方式:

    • 执行 npm init 自动生成

    • 手写 package.json 文件

  • 作用:

    • 记录了 开发环境、生产环境 的依赖的模块列表

    • 记录项目的基础信息(名称、版本、作者信息、项目描述 等)

    • 配置了 项目中的相关的命令(script 中)

3. package.json 中 属性说明
  • package.json详解,简述如下:

  • name: 包名(必须要有)

  • version: 包的版本号(必须要有);包内容的更改和包版本的更改是同步的

  • description: 包的描述

  • main: 指定了程序的主入口文件(

    • 作用: 通过 require('foo') 使用这个模块,那么 require 返回的内容就是 main 属性指定 入口文件
  • dependencies : 线上环境 依赖包列表

    • 这个属性是一个对象,配置模块依赖的列表:key是模块名,value是版本范围

    • 这些依赖是指包发布后正常执行时所需要的,也就是线上需要的包

"devDependencies": {
    "webpack": "^2.2.1",
    "webpack-merge": "^2.6.1",
}
  • devDependencies: 开发环境 依赖包列表

    • 这个属性是一个对象,存的是 额外的测试文件 或 文档框架

    • 这些依赖只有在开发时候才需要

  • homepage: 包的官网 url

  • author: 包的作者姓名

  • contributors: 包的其他贡献者姓名。

  • repository: 包代码存放的地方的类型,可以是 git 或 svn,git 可在 Github 上。

  • keywords: 关键字

六、发布模块

  • 接下来我们可以使用以下命令在 npm 资源库中注册用户(使用邮箱注册):
npm adduser
Username: mcmohd
Password:
Email: (this IS public) mcmohd@gmail.com
  • 接下来我们就用以下命令来发布模块:
npm publish

七、使用 npm 创建全局连接

1. 将局部包 连接到 全局:npm link
  • 命令:在 模块目录下执行 npm link

  • 效果:

    • 局部模块 在全局范围内可用

    • 实际上是:在 npm的全局模块目录内,生成一个指向局部模块的文件(会随着局部模块的变化 而 变化)

  • 更新: 局部包更新 全局范围内的使用,将会随着更新

 /usr/local/lib/node_modules/myModule -> src/myModule 
2. 将全局包 连接到 局部:npm link <Global Module>
  • 命令:在任意目录下 执行 npm link <Global Module>

  • 效果:

    • 局部范围内 不用下载包,便可以使用全局;不会将依赖添加到 package.json

      • 实际上是:在局部 node_modules 下,生成了一个指向 全局模块的文件(会随着全局模块的变化 而 变化)
3. 删除 局部 与 全局包 的连接:npm unlink <myModule>
  • 命令: npm unlink <myModule>

  • 项目中不在需要链接的模块,可通过该命令删除

nrm

npm包管理 – nrm源管理及nvm Nodejs版本管理

nvm(管理Node版本)、nrm(管理镜像源) 详解

nrm使用详解

nrm 的使用与主要命令(可能踩过的坑)详细剖析

1、nrm源管理

nrm(npm registry manager,nrm )是npm的镜像源管理工具,有时候国外资源太慢,使用这个就可以快速地在 npm 源间切换。

1.2 nrm全局安装

npm install -g nrm

1.3 nrm常用指令

1.3.1 查看可选择源列表
nrm ls

img

带*的是当前使用的源,上面的输出表明当前源是taobao源。

1.3.2 切换源
nrm use <registry>

其中reigstry为源名。例如若想切换到官方源,执行命令nrm use npm

1.3.3 添加源
nrm add <registry> <url>

增加定制的源,特别适用于添加企业内部的私有源,执行命令 nrm add ,其中reigstry为源名,url为源的路径。

例如:nrm add registry http://registry.npm.frp.trmap.cn/

1.3.4 删除源
nrm del <registry>
1.3.5 测试相应源的响应时间
nrm test <registry>

img

2、nrm 详解

1.什么是nrm

nrm(npm registry manager)是一个 npm 源管理器,允许你快速地在 npm源间切换。

什么意思呢,npm默认情况下是使用npm官方源(使用npm config ls命令可以查看),在国内用这个源肯定是不靠谱的,一般我们都会用淘宝npm源:https://registry.npm.taobao.org/,修改源的方式也很简单,在终端输入:

npm set registry https://registry.npm.taobao.org/

再npm config ls查看,已经切换成功。

// 查看当前使用的镜像
npm config get registry

那么,问题来了,如果哪天你又跑去国外了,淘宝源肯定是用不了的,又要切换回官网源,或者哪天你们公司有自己的私有npm源了,又需要切换成公司的源,这样岂不很麻烦?于是有了nrm。

2.nrm安装

npm install -g nrm

查看版本

nrm -V

3.nrm使用

3.1查看可选源 星号代表当前使用源
nrm ls

查看当前源

nrm current

3.2 切换源
nrm use <registry>

其中,registry为源名。

比如:切换为taobao源

nrm use taobao

4.添加源

nrm add <registry> <url>

其中,registry为源名,url为源地址。

比如:添加一个公司私有的npm源,源地址为:http://192.168.22.11:8888/repository/npm-public/,源名为cpm(随意取)。

nrm add cpm http://192.168.22.11:8888/repository/npm-public/

然后,查看是否添加成功

nrm login 登录镜像

5.删除源

nrm del <registry>

其中,registry为源名。

比如:删除刚才添加的cpm源

nrm del cpm

6.测试源速度

nrm test

其中,registry为源名。

比如:测试官方源和淘宝源的响应时间

nrm test npm

nrm test taobao

3、nrm使用详解

一. 介绍

nrm(npm registry manager) 是npm的镜像源管理工具. 有时候国外资源太慢,使用nrm可以快速的在npm源之间切换

二. 安装

> npm install -g nrm
# 全局安装 `-g`

三.基本使用

1. 查看可选择的源
> nrm ls

  npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
* taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/
  # 其中带`*` 的就是当前使用的源. 上述适用的是淘宝的镜像源
2. 切换镜像源–切换到npm 镜像源
nrm use npm
3. 增加镜像源

你可以增加定制的源,特别适用于添加企业内部的私有源,
执行命令: nrm add

其中reigstry为源名,url为源的路径。

nrm add registry http://registry.npm.frp.trmap.cn/
4. 删除镜像源

语法: nrm del <registry> 删除对应的源

nrm del taobao
# 删除淘宝的镜像源
5. 测试镜像源的速度

通过 nrm test 测试相应源的相应速度

nrm test npm

四.其他用法

命令
命令描述
ls列举所有的镜像源
current显示当前注册表名称
use 切换镜像源
add [home]添加镜像源
set-auth [value]使用base64编码的字符串或用户名和密码为自定义注册中心设置授权信息
-a --always-authSet is always auth
-u --username 设置镜像源的用户名
-p --password \设置镜像源的密码
set-email 设置邮箱
其它用法

… 还有其他的一下用法,请参考>>nrm-npm<<

Install
# npm
npm install -g nrm

# yarn 
yarn global add nrm

# pnpm
pnpm add -g nrm
Example
$ nrm ls

* npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/
  huawei ------- https://repo.huaweicloud.com/repository/npm/
$ nrm use taobao

SUCCESS The registry has been changed to 'taobao'.
Usage
Usage: nrm [options] [command]

  Commands:

    ls                                    List all the registries
    current                               Show current registry name
      -u  --show-url                        Show the registry URL instead of the name
    use [registry]                        Change registry to registry
      -l  --local                           Switch local registry
    add <registry> <url> [home]           Add one custom registry
    login <registry> [value]              Set authorize information for a registry with a base64 encoded string or username and password
      -a  --always-auth                     Set is always auth
      -u  --username <username>             Your user name for this registry
      -p  --password <password>             Your password for this registry
      -e  --email <email>                   Your email for this registry
    set-hosted-repo <registry> <value>    Set hosted npm repository for a custom registry to publish packages
    set-scope <scopeName> <value>         Associating a scope with a registry
    del-scope <scopeName>                 Remove a scope
    set <registryName>                    Set custom registry attribute
      -a  --attr <attr>                    Set custom registry attribute
      -v  --value <value>                  Set custom registry value
    del [registry]                        Delete one custom registry
    rename <registryName> <newName>       Set custom registry name
    home <registry> [browser]             Open the homepage of registry with optional browser
    publish [<tarball>|<folder>]          Publish package to current registry if current registry is a custom registry. The field 'repository' of current custom registry is required running this command. If you're not using custom registry, this command will run npm publish directly
      -t  --tag [tag]                        Add tag
      -a  --access <public|restricted>       Set access
      -o  --otp [otpcode]                    Set otpcode
      -dr --dry-run                          Set is dry run
    test [registry]                       Show the response time for one or all registries
    help [command]                        Display help for command

  Options:

    -h  --help     output usage information
    -V  --version  output the version number
Registries

4、nrm 的使用与主要命令(可能踩过的坑)详细剖析

1、什么是 nrm ?

A、nrm 的全称为:

‘npm registry manager’ (即:指的是 ‘npm’ 的镜像源管理工具);

B、nrm 的作用:

nrm 的诞生就是为了使用者在各个不同 npm 源之间来回切换;

npm 是全世界最大的软件注册表,每天有数以万计的人从这个地方下载软件; nrm 的作用就是切换下载 npm 中资源的服务器;

例如:你在国内,你使用 npm谷歌 的源下载软件就龟速,但是你使用 npm淘宝 的源就比较快,这时候你就可以使用 nrm 来快速切换源了;

(因为:不同的源会对中心服务器造成的压力不同,而像国内访问国外的源会比较慢;)

C、什么是镜像?

原来下载的包,刚开始是只存在于国外的 ‘npm’ 服务器上,但是由于网络原因,经常访问不到,这时候,我们可以在国内创建一个和官网完全一样的 ‘npm’ 服务器,只不过数据都是从人家那里拿过来的,除此之外,使用方式与方法完全一样;

2、 nrm 版本的查询:

A、打开 cmd 命令行,并输入命令 nrm -V(注意是大写的 ‘V’),就能显示出来 nrm 的版本信息;
在这里插入图片描述

B、错误提示:

若是输入错为小写的 ‘v’ ,报错情况如下:
在这里插入图片描述

3、用 nrm 切换 npm 源操作:

A、使用命令nrm ls 查看所有源,显示结果包括:npm 源名称、源地址等信息;
(‘nrm’ 默认为:npm源,地址为:https://registry.npmjs.org/);

在这里插入图片描述

B、切换 npm 源地址的操作及命令为: (以 ‘taobao’ 为例)

其一、命令为:npm use taobao,然后再通过命令nrm ls 来查看;

其二、切换后的前面的 ‘*’ (标记) 就代表着此时使用的 npm 源名称及地址;
在这里插入图片描述

在这里插入图片描述

C、在国内一般用的源为taobao,地址为:https://registry.npm.taobao.org/
原因:因为速度快;

4、nrm 中主要的命令提示:

A、nrm -V:查看当前nvm版本; (即:是 ‘nrm -Version’ 简写);

B、nrm -h:显示所有命令; (即:是 ‘nrm -help’ 简写);
C、nrm current:显示当前源名称;

D、nrm use <registry>:切 ‘npm’ 换源;

E、nrm add <registry> <url> [home]:添加一个源; (比如:公司自己的私有源);
F、nrm set-auth <registry> <value> [always]:设置自定义源的授权信息;

G、nrm set-email <registry> <value>:给自定义源设置路径;

H、nrm set-hosted-repo <registry> <value>:设置发布到自定义源的 ‘npm’ 托管仓储

I、nrm del <registry>:删除自定义源;

J、nrm home <registry> [browser]:浏览器中打开源首页;

K、nrm publish [options] [<tarball>|<folder>]:发布包到自定义源,如果没有使用自定义源,则直接发布到npm;

L、nrm test [registry]:测试源的访问速度; 不加 ‘registry’ 时,默认测试所有的源速度;

其中关于测试源速度的测试:

如果不知道哪个合适,那么就都测试一遍,就选择最快的一个就好了;

其一、测试所有源的速度;

在这里插入图片描述
其二、测试 ‘taobao’ 源及 ‘npm’ 的速度;

在这里插入图片描述

nvm

npm包管理 – nrm源管理及nvm Nodejs版本管理

nvm(管理Node版本)、nrm(管理镜像源) 详解

nvm安装,nvm的使用,nvm常用命令,nvm安装node报错,nvm切换不了,等系列集合

1、nvm对Nodejs版本的管理

1.1 nvm是什么?

Node Version Manager(NVM) 是一种用于管理多个nodejs.js版本的工具。

例如:在工作中,可能需要同时进行2个或者多个不同项目的开发,每个项目的需求不同,如果不同项目需要依赖不同版本的NodeJS运行环境。那么,在这种情况下对于维护多个版本的Nodejs将会是一件非常麻烦的事情,nvm就是为解决这个问题而产生的,它能够在同一台设备上切换不同的Nodejs版本,解决了适应项目运行环境的问题。

1.2 nvm安装

点击 Releases · coreybutler/nvm-windows · GitHub 下载最新版本,本次下载安装的是windows版本,根据电脑下载相应版本即可。img

简单说明:

  • nvm-noinstall.zip: 这个是绿色免安装版本,但是使用之前需要配置
  • nvm-setup.zip:这是一个安装包,下载之后点击安装,无需配置就可以使用,方便。
  • Source code(zip):zip压缩的源码
  • Sourc code(tar.gz):tar.gz的源码,一般用于unix系统

安装步骤:

  • 第一安装目录:我没有使用默认的安装目录,修改安装目录为 D:\nvm\ (读者可自行决定安装目录);
  • 第二安装目录:添加 node.js 的安装目录 这里用 “添加 node.js 的安装目录” 的说法其实不太准确,准确的说法应该是配置 node.js 的安装目录;默认会使用 C:\Program Files\nodejs 目录,C:\Program Files\nodejs 目录也是 node.js 默认的安装目录;如果读者在安装 nvm 前就已经安装了 node.js,且修改了 node.js 的安装目录,那么此处的目录要修改为 node.js 的安装目录;如果读者在安装 nvm 前没有安装 node.js,那么此处的目录可自行定义;
  • 第三点击安装,在安装过程中会弹出:由于已经安装了 node,所以此时提示“你希望nvm管理已经安装的 node 版本吗”,点击 是待安装完成后测试是否安装成功。

安装完成后,查看安装版本

nvm -v

img

1.3 nvm常用指令

1.3.1 查看nodejs版本列表
nvm list

img

可以看到,当前的使用版本是16.8.0,另一个版本为12.8.0

1.3.2 查看可安装的版本

显示所有可下载的版本。

nvm list available

img

1.3.3 安装新的nodejs版本
nvm install [版本号]

版本号可以参考上一指令查询出来的可安装版本

1.3.4 卸载指定nodejs版本
nvm uninstall [版本号]
1.3.5 其他常用指令
nvm arch: 显示node是运行在32位还是64位。

nvm install <version> [arch]: 安装node, version是特定版本也可以是最新稳定版本latest。可选参数arch指定安装32位还是64位版本,默认是系统位数。可以添加--insecure绕过远程服务器的SSL。

nvm list [available]: 显示已安装的列表。可选参数available,显示可安装的所有版本。list可简化为ls。

nvm on: 开启node.js版本管理。

nvm off: 关闭node.js版本管理。

nvm proxy [url]: 设置下载代理。不加可选参数url,显示当前代理。将url设置为none则移除代理。

nvm node_mirror [url]: 设置node镜像。默认是https://nodejs.org/dist/。如果不写url,则使用默认url。设置后可至安装目录settings.txt文件查看,也可直接在该文件操作。

nvm npm_mirror [url]: 设置npm镜像。https://github.com/npm/cli/archive/。如果不写url,则使用默认url。设置后可至安装目录settings.txt文件查看,也可直接在该文件操作。

nvm uninstall <version>: 卸载指定版本node。

nvm use [version] [arch]: 使用制定版本node。可指定32/64位。

nvm root [path]: 设置存储不同版本node的目录。如果未设置,默认使用当前目录。

nvm version: 显示nvm版本。version可简化为v。

2、nvm 详解

在工作中,我们可能同时在进行2个或者多个不同的项目开发,每个项目的需求不同,进而不同项目必须依赖不同版本的NodeJS运行环境,这种情况下,对于维护多个版本的node将会是一件非常麻烦的事情,nvm就是为了解决这个问题而产生的,他可以方便的在同一台设备上进行多个node版本之间切换。

1.什么是nvm

NodeVersionManager(NVM)在处理多项目中不同Node.js版本需求的解决方案。NVM允许轻松切换版本,包括下载远程LTS版本、Windows安装步骤、配置淘宝镜像、基本使用命令及常见操作。对于Node.js开发者来说,NVM简化了版本管理,提高工作效率。

为什么使用 NVM?

NVM 允许用户:

  • 使用简单的命令在本地下载任何远程长期支持 (LTS) 版本的 Node.js。
  • 直接从命令行在 Node.js 的多个版本之间轻松切换。
  • 设置别名以轻松在不同下载版本的 Node.js之间切换。

2.下载、安装

nvm同时支持Linux和macOS;我这里是在Windows上操作

2.1卸载 Node

1、若之前已安装 Node,则需要先卸载,确保已删除 Node 的安装目录以及相关环境变量

2、之后可以检查以下文件是否存在,若存在也删除:
(此处默认安装路径为C:\Program Files\nodejs)

  • C:\Program Files\nodejs
  • C:\Program Files (x86)\nodejs
  • C:\Users\{User}\AppData\Roaming\npm
  • C:\Users\{User}\AppData\Roaming\npm-cache

3、cmd命令行检测系统中是否还存在nodejs

C:\>node -v
2.2下载nvm

GitHub下载:Releases · coreybutler/nvm-windows · GitHub

下载exe能自动配置环境变量

傻瓜式一直点击下一步即可安装。

安装完成后,可以打开cmd命令行窗口。执行

nvm -v

就可以看见nvm的版本号啦!

2.3配置环境变量

安装完毕后,找到安装的路径,一些简单配置,

(**如果是默认安装在c盘的。就可以跳过。**如果是安装在其他盘的、则需要配置相应的环境变量)

怎样打开环境变量?

打开我的电脑==》右键》属性》高级系统设置》环境变量

在环境变量里就可以看见nvm的路径。如果是安装在其他盘的。就去找到对应的安装路径修改即可。

如果安装nvm的文件夹里没有nodejs这个文件夹的话,可以自己手动新建一个空的nodejs文件夹即可。

2.4配置淘宝镜像

使用npm的同学应该都知道,使用淘宝镜像安装比较快。

npm(Node Package Manager)是 Node.js 的包管理器,用于安装、管理、卸载 JavaScript 模块。npm 提供了一个包管理器,使得开发者可以方便地使用第三方模块,同时也可以将自己编写的模块发布到 npm 上供其他人使用。

我们先找到nvm所在文件位置,点开setting

里面的配置。原本只有2行代码。我们只需要在最后面追加2行代码即可:

node_mirror: http://npmmirror.com/mirrors/node/
npm_mirror: http://registry.npmmirror.com/mirrors/npm/

如图所示:

然后保存关闭。

我的这里之前默认是:
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
但是执行nvm ls available会报错,换成图中的之后,就可以执行nvm ls available了

3.nvm使用

打开cmd,执行以下命令:

nvm ls                      // 看安装的所有node.js的版本  
nvm list available          // 查显示可以安装的所有node.js的版本

注意:

pnpm 至少支持的node版本为: 18.12

node的17+存在一些独特之处,不建议使用

可以在可选列表里。选择任意版本安装,比如安装16.15.0

执行:

nvm install 16.15.0

nvm uninstall 版本号    # 卸载对应node版本(如:nvm uninstall 17.2.0) 

安装好了之后。可以执行:

nvm ls

可以在列表里看到这个版本:

如果想使用16.15.0这个版本的话。就执行:

nvm use 16.15.0

然后执行:

node -v

就可以看到当前版本已经是16.15.0了

常用命令
nvm off                     // 禁用node.js版本管理(不卸载任何东西)
nvm on                      // 启用node.js版本管理
nvm install <version>       // 安装node.js的命名 version是版本号 例如:nvm install 8.12.0
nvm uninstall <version>     // 卸载node.js是的命令,卸载指定版本的nodejs,当安装失败时卸载使用
nvm ls                      // 显示所有安装的node.js版本
nvm list available          // 显示可以安装的所有node.js的版本
nvm use <version>           // 切换到使用指定的nodejs版本
nvm v                       // 显示nvm版本
nvm install stable          // 安装最新稳定版
nvm命令行操作命令
1,nvm nvm list 是查找本电脑上所有的node版本
 
- nvm list 查看已经安装的版本
- nvm list installed 查看已经安装的版本
- nvm list available 查看网络可以安装的版本
 
2,nvm install 安装最新版本nvm
 
3,nvm use <version> ## 切换使用指定的版本node
 
4,nvm ls 列出所有版本
 
5,nvm current 显示当前版本
 
6,nvm alias <name> <version> ## 给不同的版本号添加别名
 
7,nvm unalias <name> ## 删除已定义的别名
 
8,nvm reinstall-packages <version> ## 在当前版本node环境下,重新全局安装指定版本号的npm包
 
9,nvm on 打开nodejs控制
 
10,nvm off 关闭nodejs控制
 
11,nvm proxy 查看设置与代理
 
12,nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror,如果不设置的默认是 https://nodejs.org/dist/
  nvm npm_mirror [url] 设置或者查看setting.txt中的npm_mirror,如果不设置的话默认的是: https://github.com/npm/npm/archive/.
 
13,nvm uninstall <version> 卸载制定的版本
 
14,nvm use [version] [arch] 切换制定的node版本和位数
 
15,nvm root [path] 设置和查看root路径
 
16,nvm version 查看当前的版本

在做项目的时候。不同的项目使用的nodejs版本可能不一样。我们可以在配置文件里看见:

由于nodejs版本和npm版本的不同。导致项目无法运行。所以我们就需要用到nvm这个工具了!

3、nvm安装,nvm的使用,nvm常用命令,nvm安装node报错,nvm切换不了,等系列集合

前言

在Web前端项目开发过程中,由于各种前端框架、插件 以及 Nodejs、Npm 的飞速更新,在项目新开发 或 对老项目进行更新维护时,有些项目版本的配置 和 当前Node、Npm环境不匹配,导致运行报错,甚至都无法启动。

Nvm的出现就是为了解决以上问题的,Nvm是一个Node.js版本管理器 ,为了解决Node各种版本存在不兼容问题,Nvm其实是让你在同一台机器上根据需要,安装 或 切换项目所对应的Node版本来适配项目。

一、下载nvm:

下载地址:Releases · coreybutler/nvm-windows

里面有nvm各种安装的式压缩文件,点击即可下载,这里整个过程都以windows环境为例:

下载完成后 解压 nvm-setup.zip 文件,得到nvm安装文件,点击运行 nvm-setup.exe

注:如果需要其他或最新版本在GitHub中去下载:https://github.com/coreybutler/nvm-windows/tags

二、安装nvm:

1、这里以Windows v1.1.7版为例,其他版安装类似,下载完成后直接双击nvm-setup.exe,在弹出的界面中选择同意协议,然后点击下一步,来到设置nvm的安装目录界面

2、点击Next按扭后,来到设置Nodejs的安装存储目录界面

3.点击Next按扭后,来到Nvm正式界面,执行安装,等待完成即可

到此nvm的安装就OK了。

nvm在安装成功后,会帮我们配置好环境变量(就是在电脑中的任何目录下都可以使用nvm命令)。

所以在任意目录中的空白处 按住Shift键不放,鼠标点击右键,在弹出的菜单中选择 “在此处打开 Powershell 窗口(S)”。

在弹出的命令窗口中输入相关命令,查看nvm版本号、nodejs版列表、nvm命令说明等:

三、使用Nvm安装Nodejs环境

在安装Node版本的时候,尽量选用后面带有(LTS 具有稳定性和可靠性的版本),关于哪些Node版本是LTS版可以去下面这里查看:Node.js — 下载 Node.js® (nodejs.org)

nvm install 12.18.0   // 这里以安装nodejs v12.18.0为例

// 执行以上安装命令,等待安装完成即可,由于是外部网络,请耐心等待!

// 等待安装完成后还可以继续安装多个nodejs版本。

// 为了便于演示,再安装了另到两个不同的nodejs版本。

nvm install 16.13.0

nvm install 18.20.3

。。。

以上安装完成后,会在我们指定的nvm安装目录:D:\Nvm目录中出现对应的Node.js版本啦(注:D:\Nvm目录就是上面在安装nvm时自定义的目录)!

这是Nodejs版本目录中的内容:

查看己安装的Nodejs版本 或 切换 Nodejs 环境:

查看切换Nodejs版本后的存放路径:

注意:由于使用Nvm安装的Node环境默认是没有Npm包管理工具的,有以下两个解决方案:

1、也可以全局共享Npm包,具体方法,在下面第五点会说到。

2、可以自己去下载Npm包,具体方法,在后面的第七点下的第2节会说到。

四、配置 Node 和 Npm 的镜像代理地址

由于Npm的包管理仓库默认是在国外的,所以在下载安装相关Npm依赖的时候是非常慢的,甚至就不能安装、直接报错等,然而,我们可以通过使用国内的淘宝镜像(每10分钟从原npm仓库同步一次)来安装,这样在安装Npm包时就会快很多啦!,当然类似的镜像代理还有很多的。。。

淘宝镜像:https://npmmirror.com

注:如果Npm还没有安装好的话,可以等Npm安装好以后再来添加像代理!

当然如果你的网速很好或能科学上网的话,这里就可直接跳过!

  • 查看npm配置列表:
 npm config list
npm config get registry
  • 配置npm镜像:
# 配置npm镜像地址:
npm config set registry https://registry.npm.taobao.org

# 清空npm缓存(新安装跳过)
npm cache clean --force


# 扩展:配置cnpm镜像地址:
npm install -g cnpm --registry=https://registry.npm.taobao.org

  • 配置nvm镜像:

在nvm安装目录,找到 setting.txt 文件加上如下两行配置:

# 配置node镜像:
node_mirror: https://npmmirror.com/mirrors/node/


# 配置npm镜像:
npm_mirror: https://npmmirror.com/mirrors/npm/

添加后的setting.txt文件内容

root: C:\Users\MuGuiLin\AppData\Roaming\nvm
path: C:\Program Files (x86)\nodejs
 
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

五、全局共享Npm(非必要):

一般在不能使用nvm安装的Node环境的时候,默认Npm也会自动一起安装的。由于Nvm可以管理多个版本的Node环境,如果每次添加一个Node版本都要安装一堆Npm包就烦锁了**(当然也是根据自己的使用情况而定的)**,所以将Npm全局共享出来,只需全局(在安装模块时 npm i xxx -g )加上-g, 就可以让各个版本的node共用就OK了。

**当然npm全局安装目录也是可以修改的:使用:**npm config set prefix “要设置的路径” 命令就可以修改!

// 默认全局的npm安装目录:C:\Users\Administrator\AppData\Roaming\npm
npm config set prefix "C:\Users\Administrator\AppData\Roaming\npm"

// 默认全局的npm缓存目录:C:\Users\Administrator\AppData\Roaming\node_cache
npm config set cache "C:\Users\Administrator\AppData\Roaming\node_cache"

npm root -g 命令,可以查看全局默认npm包的存储位置。

然后将npm包的路径添加到用户环境变量中,就实现npm全局共享啦!具体步骤如下图提示以操作即可!

注:环境变量在设置完成以后,一定要重新启动 或 注销一下电脑,环境变量才能生效哦!!

六、Nvm常用指令:

  • 【查看版本】:
命令说明
nvm version查看nvm版本
nvm ls查看所有已经安装的Nodejs版本
nvm list installed查看所有已经安装的Nodejs版本
nvm ls available查看运程线上所有版本(列出所有可以安装的node版本号)
nvm root查看nvm安装路径
nvm arch查看节点是否以32位或64位模式运行
nvm current查看当前node版本
nvm proxy查看设置与代理
  • 【安装版本】:
命令说明
nvm install latest安装最新稳定版Nodejs
nvm install 12.18.0安装指定版本
nvm uninstall 12.18.0卸载指定 12.18.0版本
  • 【切换版本】:
命令说明
nvm use 版本号切换版本(这个是全局的)例如:
nvm use 18.20.3

表示:切换到18.20.3版本

  • 【其他命令】:
命令说明
nvm alias default node设置默认版本为最新版本
nvm on启用node.js版本管理
nvm off禁用node.js版本管理
nvm proxy [url]设置用于下载的代理。将[url]留空以查看当前代理。 将[url]设置为“无”以删除代理

七、可能遇到的问题:

1、用Npm安装xxx插件后,在使用时出现如下:

**错误1:**无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本,有关详细信息请参阅。。。!

**错误2:**xxx在使用时出现:无法将“xxx”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。

📢问题原因:

1、执行策略权限不足(执行不信任的脚本),执行策略默认是 Restricted

2、没有配置全局npm的环境变量

解决办法1:执行策略权限

1、用快捷键:Win + X,选择 Windows Power Shell(管理员)(A) ,以管理员身份打开Power Shell。

2、在打开的打开Power Shell窗口中输入命令:set-executionpolicy remotesigned

3、然后输入 Y,按回车键,问题解决。

解决办法2:给全局Npm配置系统环境变量

1、查看全局npm的存放目录路径,用 npm root -g 命令

npm root -g

C:\Users\Administrator\AppData\Roaming\npm  // 这个就是全局npm的存放路径

2、配置系统环境变量

3、配置完成后,重启电脑 或 重新打开一个命令窗口测试即可!

2、当用nvm切换到指定的某个nodejs版本后,npm命令无法使用(找不到npm):

问题原因:

1、用nvm安装node时,默认没有把npm包一起安装上!

解决办法:手动下载安装

1、查看全局nvm的node版本管理存放目录路径,用 nvm root 命令

2、打开nvm的node版本管理存放目录,下载对应的Npm版本,放到nvm管理目录对应的Node版本目录下的node_modules目录中即可。

Npm(Node)下载地址:

Node.js 对应的 Npm 版本 和下载地址

3、当完成以上步骤后,我们在再到命令行工具中输入 npm -v 命令时,就有npm啦**(注:在npm安装后以后,记得要重新打开一个新有命令窗口输入查看执行,如果直接在原来的命令窗口中执行命令可能还是没有哦)**!!

八、其他相关问题:

问题1:

在团队项目开发过程中,如果开发成员的npm包管理工具版本不一致时(因为各npm版本之间存在兼容性问题),导致在安装项目依赖执行npm install 命令时报错如下:

ERESOLVE  
npm ERR! ERESOLVE unable to resolve dependency tree

解决办法1:

可通过升级 或 降级 指定的 npm 版本来处理该问题: 【注:@后面是自定义的版本号】,将安装命令 npm install 改为如下:

npx -p npm@6 npm i --legacy-peer-deps 

解决办法2:

可通yarn来安装:

yarn install

问题2:

使用 npm 或 yarn 安装项目依赖包时,报错导致在安装执行npm install 命令时报错如下:

error An unexpected error occurred: "https://registry.npmmirror.com......:unable to get local issuer certificate**".

info If you think this is a bug...

解决办法:

npn:

npn config set "strict-ssl" false -g

yarn:

yarn config set "strict-ssl" false -g

问题3:

使用npm install yarn -D 来安装yarn工具后,在使用npmyarn 命令时报如下错:

npm : 无法加载文件 C:\\Program Files\\nodejs\\npm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink

yarn : 无法加载文件 C:\\Users\\Administrator\\AppData\\Roaming\\npm\\yarn.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about\_Execution\_Policies。

**问题出现原因:**这个错误是由于系统的执行策略(Execution Policy)导致的。Windows系统默认情况下会限制PowerShell脚本的执行,而npm在执行时可能会涉及到PowerShell脚本的操作。

解决办法:

只需修改执行策略的范围即可,在开始菜单中搜索PowerShell以管理员身份打开命令行工具,执行如下命令:

set-ExecutionPolicy RemoteSigned

或

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

然后选择 Y 或 按Enter回车键表示确认执行。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值