JavaWeb 23.一文速通npm的配置和使用

目录

一、npm的介绍

二、npm的安装和配置 

1.安装 :

2.配置依赖下载使用阿里镜像

3. 配置全局依赖下载后存储位置

4.升级npm版本

5.环境变量配置

三、npm常用命令

1.项目初始化

npm.init

npm init -y

2.安装依赖文件   

3. 升级依赖

4.卸载依赖

5.查看依赖 

查看项目依赖

查看全局依赖

6.运行npm命令

7.VScode中运行npm常用命令

① 新建一个文件夹

② 从VScode中打开终端

③ npm init -y按照默认配置初始化文件

④ 初始化后,VScode自动生成json文件


无寻处,惟有少年心

                        —— 24.10.19

一、npm的介绍

1.前端框架的下载工具

2.前端项目的管理工具

3.NPM全称Node Package Manager,是Node,js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的;也是Node.js的包管理工具,相当于后端的Maven的部分功能。


二、npm的安装和配置 

1.安装 :

安装Node.js,自动安装 npm 包管理工具


2.配置依赖下载使用阿里镜像

npm 安装依赖包时默认使用的是官方源,由于国内网络环境的原因,有时会出现下载速度过慢的情况。为了解决这个问题,可以配置使用阿里镜像来加速npm 的下载速度,打开node.js所在目录下,地址栏输入cmd,命令行终端执行以下命令,配置使用阿里镜像:

npm config set registry https://registry.npmmirror.com

验证配置 

npm config get registry


3. 配置全局依赖下载后存储位置

Windows系统上,npm的全局依赖默认安装在 <用户目录>\AppData\Roaming\npm 目录下

如果需要修改全局依赖的安装路径,可以按照如下步骤操作:

① 创建一个新的全局依赖存储目录,如:D:\GlobalNodeModules

② 打开命令行终端,执行以下命令来配置新的全局依赖存储路径

npm config set prefix "D:\GlobalNodeModules"

③ 确认配置已生效,执行以下命令查看当前的全局依赖存储路径

npm config get prefix

4.升级npm版本

在之前从地址栏打开的cmd命令行中,输入npm -v查看版本,如果node中自带的版本过低,则需要自行升级至9.6.6

-g 全局升级(注意:先设置全局依赖)

 npm install -g npm@9.6.6


5.环境变量配置

① 找到node.js的安装路径,在路径下新建两个文件夹,node_cache和node_global 

② 新建系统变量 NODE_HOME,将node.js安装路径复制进去

③ 编辑系统环境变量 

新建%NODE_HOME%、%NODE_HOME%\node_global、%NODE_HOME%\node_cache的三个环境变量

④ 找到用户变量path中,默认的C:\User\35025\AppDate\Roaming\npm修改为node_global文件的路径

至此,环境变量已经配置好了


在cmd中执行如下命令,配置缓存目录和全局目录

 ① 配置缓存目录

npm config set cache "cache文件目录"

② 配置全局目录 

npm config set prefix "global文件目录"

③ 更换npm源为淘宝镜像 

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

④ 验证配置是否成功 

npm config get registry


三、npm常用命令

1.项目初始化

npm.init

进入一个vscode创建好的项目中,执行npm init命令后,npm会引导您在命令行界面上回答一些问题,例如项目名称、版本号、作者、许可证等信息,并最终生成一个package.json 文件。package.json信息会包含项目基本信息,类似maven的pom.xml。

填写初始化信息

package name:包名

version:版本号

description:项目描述

entry point:入口点

test command:测试命令

git repository:git仓库地址

keywords:关键字

author:开发作者

license:证书、许可

进行提示,是否确认信息并打印相关信息

自动生成一个初始化信息文件

存的是一个json文本的文件,json文本中存放了初始化信息


 npm init -y

npm init -y

执行,-y yes的意思,所有信息使用当前文件夹的默认值,不需要挨个填写


2.安装依赖文件   

(查看所有依赖地址: https://www.npmjs.com)    

初始化完毕后会自自动生成一个package.json文件

安装全局依赖只需要在下载的包前写上-g(基本不会使用全局依赖)

npm install -g 框架名

安装package.json中的所有记录的依赖

npm install

注:package.json文件中会自动存储下载框架的版本号


3. 升级依赖

npm update 包名

包名后不跟版本号将会默认升级到最新版本


4.卸载依赖

npm uninstall 包名

5.查看依赖 

查看项目依赖

npm ls

查看全局依赖

npm list -g

6.运行npm命令

npm run 程序名

npm run 命令是在执行 npm 脚本时使用的命令。npm 脚本是一组在 package.jison 文件中定义的可执行命令。npm 脚本可用于启动应用程序,运行测试,生成文档等,还可以自定义命令以及配置需要运行的脚本。
在 package.json 文件中,scripts字段是一个对象,其中包含一组键值对键是要运行的脚本的名称,值是要执行的命令。例如,以下是一个简单的 package.json 文件:

{"name": "my-app","version": "1.0.0","scripts": {"start": "node index.js","test": "jest","build": "webpack"},"dependencies": {"express": "*4.17.1","jest": "*27.1.0","webpack": "*5.39.0"}
}

scripts 对象包含 start、test和 build 三个脚本。当您运行 npm run start 时,将运行 node index.js 并启动应用程序。同样,运行 npm run test 时,将运行 Jest 测试套件,而 npm run build 将运行webpack 命令以生成最终的构建输出, 

总之,npm run 命令为您提供了一种在packagejson文件中定义和管理一组指令的方法,可以在项目中快速且灵活地运行各种操作。


7.VScode中运行npm常用命令

① 新建一个文件夹

② 从VScode中打开终端

③ npm init -y按照默认配置初始化文件

④ 初始化后,VScode自动生成json文件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/57725.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入浅出 Vue3 nextTick

程序员节日快乐~ #1024程序员节 | 征文# nextTick 概念 当你在 Vue 的响应式数据模型中对数据进行修改时&#xff0c;这些变化并不会立即同步到 DOM 上_&#xff0c;而是会在当前的微任务队列&#xff08;microtask queue&#xff09;执行完毕后进行批量更新。这种机制被称为…

内网穿透:如何借助Cloudflare连接没有公网的电脑的远程桌面(RDP)

内网穿透&#xff1a;如何借助Cloudflare连接没有公网的电脑的远程桌面(RDP)-含详细原理配置说明介绍 前言 远程桌面协议(RDP, Remote Desktop Protocol)可用于远程桌面连接&#xff0c;Windows系统&#xff08;家庭版除外&#xff09;也是支持这种协议的&#xff0c;无需安装…

使用 NumPy 和 Matplotlib 实现交互式数据可视化

使用 NumPy 和 Matplotlib 实现交互式数据可视化 在数据分析中&#xff0c;交互式可视化可以更好地帮助我们探索和理解数据。虽然 Matplotlib 是静态绘图库&#xff0c;但结合一些技巧和 Matplotlib 的交互功能&#xff08;widgets、event handlers&#xff09;&#xff0c;我…

水轮发电机油压自动化控制系统解决方案介绍

在现代水电工程中&#xff0c;水轮机组油压自动化控制系统&#xff0c;不仅直接关系到水轮发电机组的安全稳定运行&#xff0c;还影响着整个水电站的生产效率和经济效益。 一、系统概述 国科JSF油压自动控制系统&#xff0c;适用于水轮发电机组调速器油压及主阀&#xff08;蝶…

Dongle Sentinal在Jenkins下访问不了的问题

背景&#xff1a; 工作站部署的jenkins的脚本无法正常打包&#xff0c;定位后发现是本地获取不了license&#xff0c;但是使用usb over network的远程license都能获取并正常打包 分析&#xff1a; 获取不了license的原因是本地无法识别dongle。根据提供信息&#xff0c;之前…

SAP_SD模块-销售订单创建价格扩大10倍问题分析及后续订单价格批量更新问题处理

一、业务背景 我们公司的销售订单&#xff0c;是通过第三方销售管理平台创建好订单后&#xff0c;把表头和行项目数据&#xff0c;定时推送到SAP&#xff1b;SAP通过自定义表ZZT_ORDER_HEAD存放订单表头数据&#xff0c;通过ZZT_ORDER_DETAIL存放行项目数据&#xff1b;然后再用…

探索AI人工智能机器学习:解锁未来科技的钥匙

作者简介&#xff1a;我是团团儿&#xff0c;是一名专注于云计算领域的专业创作者&#xff0c;感谢大家的关注 座右铭&#xff1a; 云端筑梦&#xff0c;数据为翼&#xff0c;探索无限可能&#xff0c;引领云计算新纪元 个人主页&#xff1a;团儿.-CSDN博客 前言&#xff1a;…

【C#】使用Visual Studio创建Windows Forms应用程序计算对角线之和

文章目录 使用Visual Studio创建Windows Forms应用程序计算对角线之和步骤 1: 创建新的Windows Forms应用程序项目步骤 2: 设计窗体步骤 3: 编写代码步骤 4: 运行程序步骤 5: 运行结果 使用Visual Studio创建Windows Forms应用程序计算对角线之和 大家好&#xff01;今天&…

Spring Boot:植物健康的智能守护者

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

【网络原理】TCP/IP五层网络模型之网络层-----IP协议详解,建议收藏!!

&#x1f490;个人主页&#xff1a;初晴~ &#x1f4da;相关专栏&#xff1a;计算机网络那些事 前几篇文章中我们深入研究了TCP协议&#xff0c;因为TCP协议在我们日常开发中的使用频率非常高。而相比之下&#xff0c;IP协议与我们普通程序员关系就没那么近了。一般是专门开发…

数字 图像处理算法的形式

一 基本功能形式 按图像处理的输出形式&#xff0c;图像处理的基本功能可分为三种形式。 1&#xff09;单幅图像 单幅图像 2&#xff09;多幅图像 单幅图像 3&#xff09;单&#xff08;或多&#xff09;幅图像 数字或符号等 二 几种具体算法形式 1.局部处理邻域对于任一…

libevent源码剖析-event

1 简介 本文来重点介绍下libevent中的event事件&#xff0c;在类unix系统中编写网络程序时&#xff0c;我们经常需要处理3类事件-IO事件&signal事件&timer事件&#xff0c;libevent通过reactor来注册&调度&处理IO事件&#xff0c;并且也将signal和timer事件借助…

2024年10月21日计算机网络,乌蒙第一部分

【互联网数据传输原理 &#xff5c;OSI七层网络参考模型】 https://www.bilibili.com/video/BV1EU4y1v7ju/?share_sourcecopy_web&vd_source476fcb3b552dae37b7e82015a682a972 mac地址相当于是名字&#xff0c;ip地址相当于是住址&#xff0c;端口相当于是发送的东西拿什…

SPI通信(W25Q64)

目录 一.前言 1.SPI的简介 2.SPI的应用 3. SPI的硬件电路 4. SPI硬件电路设计的核心 5. SPI时序基本单元 二. W25Q64简介 1. 芯片简介 2. &#xff08;非&#xff09;易失性存储器 3. 引脚定义 4. W25Q64框图 5. Flash操作的注意事项 三. SPI读写W25Q64&#xff08;使用软件…

一文教会你如何使用 iLogtail SPL 处理日志

作者&#xff1a;阿柄 随着流式处理的发展&#xff0c;出现了越来越多的工具和语言&#xff0c;使得数据处理变得更加高效、灵活和易用。在此背景下&#xff0c;SLS 推出了 SPL(SLS Processing Language) 语法&#xff0c;以此统一查询、端上处理、数据加工等的语法&#xff0…

vue3使用i18n做国际化多语言,实现常量跟随语言切换翻译

因为我有一个常量的配置文件在项目中&#xff0c;而且有中文内容&#xff0c;我想在切换语言的时候&#xff0c;跟着这个翻译也实时切换&#xff0c;就可以使用computed计算属性实现。 把name改成下面的样子&#xff1a; name: computed(() > t(pad.regularMode)), 就可以…

Springboot配置方式和优先级

Springboot配置方式和优先级 调试思路key的获取过程application.properties优先级总结 在阅读开源项目时看到一种不太常见的属性配置方式&#xff0c;在项目根路径定义配置文件。并且提到下面的顺序&#xff0c;验证并看一下源码实现。 # spring boot支持外部application.yml …

AI服务器HBA卡的国产PCIe4.0/5.0 switch信号完整性设计与实现,支持定制(二)

表 &#xff12; 展示了 &#xff30;&#xff23;&#xff22; 板所选介质材料 &#xff30;&#xff33;&#xff32;&#xff14;&#xff10;&#xff10;&#xff10;&#xff21;&#xff35;&#xff33;&#xff17;&#xff10;&#xff13; &#xff0c; &#xff3…

FreeRTOS实时操作系统(2)

前言&#xff1a;FreeRTOS内容较多&#xff0c;分篇发布&#xff0c;较为基础&#xff0c;旨在梳理知识&#xff0c;适合入门的同学 &#xff08;基于正点原子STM32F103开发板V2&#xff09; &#xff08;对于本篇&#xff0c;若有疑问&#xff0c;欢迎在评论区留言&#xf…

萤石设备视频接入平台EasyCVR私有化视频平台变电站如何实现远程集中监控?

一、方案背景 随着城市经济的发展和电力系统的改造&#xff0c;变电站的数量和规模逐渐增加&#xff0c;对变电站的安全管理和监控需求也越来越高。视频监控系统作为重要的安全管理手段&#xff0c;在变电站中起到了关键的作用。 目前青犀视频研发的萤石设备视频接入平台EasyC…