百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

第1章 NPM 包管理工具(npm包使用)

wxin55 2024-11-08 14:39 9 浏览 0 评论

1.1 什么是 NPM

NPM 全称 Node Package Manager,它是 JavaScript 的包管理工具, 并且是 Node.js 平台的默认包管理工具。通过

NPM 可以安装、共享、分发代码,管理项目依赖关系。

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

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

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

其实我们可以把 NPM 理解为前端的 Maven。我们通过 npm 可以很方便地安装与下载 js 库,管理前端工程。

最新版本的 Node.js 已经集成了 npm 工具,所以必须首先在本机安装 Node 环境。

Node.js 官网下载地址:

英文网:https://nodejs.org/en/download/

中文网:http://nodejs.cn/download/

装完成后,查看当前 nodejs 与 npm 版本

C:\Users\Administrator>node -v

v10.15.3

C:\Users\Administrator>npm -v

5 6.4.1

1.2 NPM 初始化项目

npm init 命令初始化项目:

新建一个 npm-demo 文件夹,通过命令提示符窗口进入到该文件夹,执行下面命令进行初始化项目

1 npm init

根据提示输入相关信息,如果使用默认值,则直接回车即可。

package name: 包名,其实就是项目名称,注意不能有大写字母

version: 项目版本号

description: 项目描述

keywords: {Array}关键字,便于用户搜索到我们的项目



最后会生成 package.json 文件,这个是包的配置文件,相当于 maven 的 pom.xml 我们之后也可以根据需要进行修改。

{

"name": "npm-demo", //包名

"version": "1.0.0", //版本号

"description": "first npm demo", // 描述

"main": "index.js", //程序的主入口文件 index.js

"scripts": { // 脚本命令组成的对象, 如果 test 测试环境,dev 开发环境, prod 生产环境

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "",

"license": "ISC" //许可证 默认即可

}



初始化项目,均采用默认信息,不会提示你手动输入信息

npm init -y

1.3 安装模块

1.3.1 安装方式

npm install 命令用于安装某个模块,安装方式分为 :本地安装(local)、全局安装(global)两种.

本地安装

将 JS 库安装在当前执行命令时所在目录下

# 本地安装命令, 版本号可选

npm install <Module Name>[@版本号]

全局安装

将 JS 库安装到你的 全局目录 下

# 全局安装命令

npm install <Module Name>[@版本号] -g

如果安装时出现如下错误:

npm err! Error: connect ECONNREFUSED 127.0.0.1:8087

解决方法,执行如下命令:

npm config set proxy null

1.3.2 本地安装

本地安装会将 js 库安装在当前目录下

安装最新版

模块,它是基于Node.js 平台的 Web 开发框架,执行如下命令:

npm install express

如果出现黄色的是警告信息,可以忽略,请放心,你已经成功安装了。

在该目录下会出现一个 node_modules 文件夹 和 package-lock.json

node_modules 文件夹用于存放下载的js库(相当于maven的本地仓库)

package-lock.json 是在 npm install 时候生成一份文件。

用以记录当前状态下实际安装的各个包的具体来源和版本号。

重新打开 package.json 文件,发现刚才下载的 jquery.js 已经添加到依赖列表中了.



关于模块版本号表示方式:

指定版本号:比如 3.5.2 ,只安装指定版本。遵循 “大版本.次要版本.小版本”的格式规定。

~ 波浪号 + 指定版本号:比如 ~3.5.2 ,安装 3.5.x 的最新版本(不低于 3.5.2),但是不安装 3.6.x,也

就是说安装时不改变大版本号和次要版本号。

^ 插入号 + 指定版本号:比如 ^3.5.2 ,安装 3.x.x 的最新版本(不低于 3.5.2),但是不安装 4.x.x,也

就是说安装时不改变大版本号。需要注意的是,如果大版本号为0,则插入号的行为与波浪号相同,这是

因为此时处于开发阶段,即使是次要版本号变动,也可能带来 程序的不兼容。

latest :安装最新版本。

安装指定版本模块

安装 jquery 2.2.0版本的jquery

npm install jquery@2.2.0

1.3.3 全局安装

使用全局安装会将库安装到你的全局目录下。

查看全局安装目录

如果你不知道你的全局目录在哪里,执行命令:

npm root -g



我的全局目录是:C:\Users\Administrator\AppData\Roaming\npm\node_modules

修改默认全局安装目录,使用命令 :

比如我修改为 D:\npm

npm config set prefix "D:\npm"

全局安装

全局安装 vue 模块,执行命令

npm install vue -g

查看全局已安装模块:

npm list -g

1.3.4 生产环境模块安装

格式:

--save 或 -S 参数意思是把模块的版本信息保存 package.json 文件的 dependencies 字段中(生产环境依赖

)

1 npm install <Module Name> [--save|-S]

举例:

安装 vue 模块,安装在生产环境依赖中



npm install vue -S

在 package.json 文件的 dependencies 字段中

"dependencies": {

"express": "^4.17.0",

"jquery": "^2.2.0",

"vue": "^2.6.10"

}

1.3.5 开发环境模块安装

格式:

--save-dev 或 -D 参数是把模块版本信息保存到 package.json 文件的 devDependencies 字段中(开发环境

依赖),所以开发阶段一般使用它:

npm install <Module Name> [--save-dev|-D]

举例:

安装 eslint 模块,它是语法格式校验,只在开发环境依赖中即可

npm install eslint -D

在 package.json 文件的 devDependencies 字段中

"devDependencies": {

"eslint": "^5.16.0"

}

1.4 批量下载模块

我们从网上下载某些项目后,发现只有 package.json , 没有 node_modules 文件夹,这时我们需要通过命令下载

这些js库。

命令提示符进入 package.json 所在目录,执行命令:

npm install

此时,npm 会自动下载 package.json 中依赖的js库.

1.5 查看模块命令



1.5.1 查看本地已安装模块方式

方式1:可以安装目录 node_modules 下的查看包是否还存在

方式2:可以使用以下命令查看:

# 查看本地安装的所有模块

npm list

# 查看指定模板

npm list <Module Name>

1.5.2 查看模块远程最新版本

1. 格式

npm view <Module Name> version

2. 举例: 查看 jquery 模块的最新版本

npm view jquery version

1.5.3 查看模块远程所有版本

1. 格式

npm view <Module Name> versions

2. 举例: 查看 jquery 模块的所有版本

npm view jquery versions

1.6 卸载模块

卸载局部模块

npm uninstall <Module Name>

卸载全局模块

npm uninstall -g <Module Name>



1.7 配置淘宝镜像加速

1. 查看当前使用的镜像地址

npm get registry

2. 配置淘宝镜像地址

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

3. 安装下载模块

npm install <Module Name>

4. 还原默认镜像地址

npm config set registry https://registry.npmjs.org/



相关推荐

ES6中 Promise的使用场景?(es6promise用法例子)

一、介绍Promise,译为承诺,是异步编程的一种解决方案,比传统的解决方案(回调函数)更加合理和更加强大在以往我们如果处理多层异步操作,我们往往会像下面那样编写我们的代码doSomething(f...

JavaScript 对 Promise 并发的处理方法

Promise对象代表一个未来的值,它有三种状态:pending待定,这是Promise的初始状态,它可能成功,也可能失败,前途未卜fulfilled已完成,这是一种成功的状态,此时可以获取...

Promise的九大方法(promise的实例方法)

1、promise.resolv静态方法Promise.resolve(value)可以认为是newPromise方法的语法糖,比如Promise.resolve(42)可以认为是以下代码的语...

360前端一面~面试题解析(360前端开发面试题)

1.组件库按需加载怎么做的,具体打包配了什么-按需加载实现:借助打包工具(如Webpack的require.context或ES模块动态导入),在使用组件时才引入对应的代码。例如在V...

前端面试-Promise 的 finally 怎么实现的?如何在工作中使用?

Promise的finally方法是一个非常有用的工具,它无论Promise是成功(fulfilled)还是失败(rejected)都会执行,且不改变Promise的最终结果。它的实现原...

最简单手写Promise,30行代码理解Promise核心原理和发布订阅模式

看了全网手写Promise的,大部分对于新手还是比较难理解的,其中几个比较难的点:状态还未改变时通过发布订阅模式去收集事件实例化的时候通过调用构造函数里传出来的方法去修改类里面的状态,这个叫Re...

前端分享-Promise可以中途取消啦(promise可以取消吗)

传统Promise就像一台需要手动组装的设备,每次使用都要重新接线。而Promise.withResolvers的出现,相当于给开发者发了一个智能遥控器,可以随时随地控制异步操作。它解决了三大...

手写 Promise(手写输入法 中文)

前言都2020年了,Promise大家肯定都在用了,但是估计很多人对其原理还是一知半解,今天就让我们一起实现一个符合PromiseA+规范的Promise。附PromiseA+规范地址...

什么是 Promise.allSettled()!新手老手都要会?

Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise,并带有一个对象数组,每个对象表示对应的pr...

前端面试-关于Promise解析与高频面试题示范

Promise是啥,直接上图:Promise就是处理异步函数的API,它可以包裹一个异步函数,在异步函数完成时抛出完成状态,让代码结束远古时无限回掉的窘境。配合async/await语法糖,可...

宇宙厂:为什么前端离不开 Promise.withResolvers() ?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发。1.为什么需要Promise.with...

Promise 新增了一个超实用的 API!

在JavaScript的世界里,Promise一直是处理异步操作的神器。而现在,随着ES2025的发布,Promise又迎来了一个超实用的新成员——Promise.try()!这个新方法简...

一次搞懂 Promise 异步处理(promise 异步顺序执行)

PromisePromise就像这个词的表面意识一样,表示一种承诺、许诺,会在后面给出一个结果,成功或者失败。现在已经成为了主流的异步编程的操作方式,写进了标准里面。状态Promise有且仅有...

Promise 核心机制详解(promise机制的实现原理)

一、Promise的核心状态机Promise本质上是一个状态机,其行为由内部状态严格管控。每个Promise实例在创建时处于Pending(等待)状态,此时异步操作尚未完成。当异步操作成功...

javascript——Promise(js实现promise)

1.PromiseES6开始支持,Promise对象用于一个异步操作的最终完成(包括成功和失败)及结果值的表示。简单说就是处理异步请求的。之所以叫Promise,就是我承诺,如果成功则怎么处理,失败怎...

取消回复欢迎 发表评论: