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.rhkb.cn/news/456583.html

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

相关文章

Android 原生开发与Harmony原生开发浅析

Android系统 基于Linux ,架构如下 底层 (Linux )> Native ( C层) > FrameWork层 (SystemService) > 系统应用 (闹钟/日历等) 从Android发版1.0开始到现在15,经历了大大小小的变革 从Android6.0以下是个分水岭,6.0之前权限都是直接卸载Manifest中配置 6.0开始 则分普…

Rust的move关键字在线程中的使用

为什么使用 move&#xff1f; 在 Rust 中&#xff0c;move 关键字主要用于闭包。当我们在一个线程中创建一个闭包并将其传递给另一个线程时&#xff0c;如果闭包中使用了某些变量&#xff0c;就需要决定这些变量的所有权归属。 不使用 move&#xff1a; 默认情况下&#xff0…

LabVIEW提高开发效率技巧----事件日志记录

在LabVIEW开发中&#xff0c;集成事件日志记录系统是提升程序调试效率和确保系统运行稳定的关键步骤。通过记录关键操作和异常事件&#xff0c;开发人员可以快速定位问题、优化程序性能&#xff0c;并确保系统的稳定性和可靠性。 1. 事件日志的作用 事件日志是指在程序运行过…

python-PyQt项目实战案例:制作一个视频播放器

文章目录 1. 关键问题描述2. 通过OpenCV读取视频/打开摄像头抓取视频3. 通过PyQt 中的 QTimer定时器实现视频播放4. PyQt 视频播放器实现代码参考文献 1. 关键问题描述 在前面的文章中已经分享了pyqt制作图像处理工具的文章&#xff0c;也知道pyqt通过使用label控件显示图像的…

MySQL 初阶——多版本控制 MVCC

一、版本链&#xff08;undo 日志&#xff09; a. 什么是版本链 版本链就是一条以事务为节点的单链表。其 next 指针指向前一个版本的事务。 b. 版本链的增删 当一个事务被完成时&#xff0c;这个事务就会被加入到版本链里去&#xff1b;当要回滚时&#xff0c;版本链就会删…

微前端架构新选择:micro-app 框架一文全解析

目录 前言技术方案沙箱withiframe 环境变量主应用生命周期子应用生命周期初始化更新卸载缓存 JS 沙箱样式隔离元素隔离路由系统⭐数据通信⭐资源系统预加载umd 模式其他功能调试工具 前言 https://micro-zoe.github.io/micro-app/ micro-app 是由京东前端团队推出的一款微前端…

400V交流智能剩余电流监测系统设计与应用

摘要&#xff1a;针对变电站400V交流系统频繁发生剩余电流保护器跳闸的问题&#xff0c;本研究设计了一套智能化的分布式剩余电流监测系统。该系统利用CT传感器采集400V系统各负载端的剩余电流数据&#xff0c;经过运算处理后&#xff0c;将信息传递给交流绝缘监测装置。随后&a…

重生之“我打数据结构,真的假的?”--3.栈和队列(无习题)

栈和队列 C语言中的栈和队列总结 在C语言中&#xff0c;**栈&#xff08;Stack&#xff09;和队列&#xff08;Queue&#xff09;**是两种非常重要的数据结构。它们广泛用于各种应用中&#xff0c;比如内存管理、任务调度、表达式求值等。本文将对这两种数据结构进行详细的介…

基于Multisim的四人智力竞赛抢答器设计与仿真

1&#xff09;设计任务 设计一台可供 4 名选手参加比赛的智力竞赛抢答器。 用数字显示抢答倒计时间&#xff0c;由“9”倒计到“0”时&#xff0c;无人抢答&#xff0c;蜂鸣器连续响 1 秒。选手抢答时&#xff0c;数码显示选手组号&#xff0c;同时蜂鸣器响 1 秒&#xff0c;倒…

基于Python+SQL Server2008实现(GUI)快递管理系统

快递业务管理系统的设计与实现 摘要: 着网络新零售的到来&#xff0c;传统物流在网购的洗礼下迅速蜕变&#xff0c;在这场以互联网为基础的时代变革中&#xff0c;哪家企业能率先转变其工作模式就能最先分得一杯羹&#xff0c;物流管理也不例外。传统的物流管理模式效率低下&a…

金融工程--pine-script 入门

背景 脚本基本组成 策略实现 实现马丁格尔策略 初始化变量&#xff1a;定义初始资本、初始头寸大小、止损百分比、止盈百分比以及当前资本和当前头寸大小等变量。 更新头寸&#xff1a;创建一个函数来更新头寸大小、止损价格和止盈价格。在马丁格尔策略中&#xff0c;每次亏…

micro-app【微前端实战】主应用 vue3 + vite 子应用 vue3+vite

micro-app 官方文档为 https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/framework/vite 子应用 无需任何修改&#xff0c;直接启动子应用即可。 主应用 1. 安装微前端框架 microApp npm i micro-zoe/micro-app --save2. 导入并启用微前端框架 microApp src/main.ts …

【Ubuntu】Virtualbox下lamp集群分布式搭建Wordpress

WordPress是一种使用PHP语言开发的开源内容管理系统&#xff08;CMS&#xff09;&#xff0c;也常被用作博客平台。 开发语言&#xff1a;PHP 数据库&#xff1a;MySQL、mariadb&#xff08;或其他兼容的数据库系统&#xff09; 授权方式&#xff1a;GNU通用公共许可证下发布&a…

【JavaEE】【多线程】单例模式

目录 一、设计模式1.1 单例模式1.1.1 饿汉模式1.1.2 懒汉模式 1.2 线程安全问题1.3 懒汉模式线程安全问题的解决方法1.3.1 原子性问题解决1.3.2 解决效率问题1.3.3 解决内存可见性问题和指令重排序问题 一、设计模式 在讲解案例前&#xff0c;先介绍一个概念设计模式&#xff…

C++ 模版和继承

目录 一.模版 1.模版的基本概念 a.函数模版 b.类模板 c.模版的实例化 d.class 和 typename的区别 e.非类型模版参数 2.模版的特化 a.全特化 —— 参数类型全部特殊化处理 b.半特化 —— 部分参数特殊化处理 c.偏特化——对某些类型的进一步限制&#xff08;实例化时传…

GD32学习知识点累计

时钟系统 GD32f427主频最高位240MHZ&#xff08;但是只能到200M&#xff09;&#xff0c;GD32给的函数外接25MHZ晶振配置主频为200MHZ,APB1最高频率为60HZ配置为主频的4分频为50MHZ&#xff0c;APB2最大为120MHZ配置为主频的2分频为100MHZ 定时器 无论什么定时器最大频率为200M…

安全见闻---清风

注&#xff1a;本文章源于泷羽SEC&#xff0c;如有侵权请联系我&#xff0c;违规必删 学习请认准泷羽SEC学习视频:https://space.bilibili.com/350329294 安全见闻1 泷哥语录&#xff1a;安全领域什么都有&#xff0c;不要被表象所迷惑&#xff0c;无论技术也好还是其他方面…

AI带货主播框架的搭建!

AI带货主播&#xff0c;作为新兴的技术应用&#xff0c;正在逐渐改变电商行业的面貌&#xff0c;通过利用人工智能技术&#xff0c;AI带货主播能够模拟真实主播的行为&#xff0c;与用户进行互动&#xff0c;推荐商品&#xff0c;提升购物体验。 本文将介绍如何搭建一个AI带货…

处理Hutool的Http工具上传大文件报OOM

程序环境 JDK版本&#xff1a; 1.8Hutool版本&#xff1a; 5.8.25 问题描述 客服端文件上传主要代码&#xff1a; HttpRequest httpRequest HttpUtil.createPost(FILE_UPLOAD_URL); Resource urlResource new UrlResource(url, fileName); httpRequest.form("file&q…

self-supervised learning(BERT和GPT)

1芝麻街与NLP模型 我們接下來要講的主題呢叫做Self-Supervised Learning&#xff0c;在講self-supervised learning之前呢&#xff0c;就不能不介紹一下芝麻街&#xff0c;為什麼呢因為不知道為什麼self-supervised learning的模型都是以芝麻街的人物命名。 因為Bert是一個非常…