npm介绍

news2025/1/18 4:34:29

npm介绍

npmNode Package Manager的缩写)是一个软件包管理器,主要进行JavaScript的包管理。通过npm,我们可以很方便地进行JavaScript包的下载、升级,我们也可以把我们开发的JavaScript包共享给其他使用者。

npm没有出现之前,对于想要复用的代码,我们的做法是把项目压缩一下,把它打包成一个包放到一边,当要用的时候解压开,拿出来就可以用。

后来有了CDN,通过一个script标签就可以直接引入,但是我们的项目是成长的,规模会越来越大,结构越来越复杂,可能需要的包或者依赖就越来越复杂,那每个包都有它自己生长的方式,每个包肯定是有不同的版本,那么如果一个包依赖着另一个包,比如一个webpack插件A依赖着webpack,插件版本是2,而依赖的webpack的版本是1,那把webpack版本升级成2,那这个插件A很有可能就不工作了,那这就非常麻烦了,那得去检查这个插件A,把A升级一下,但要是B也依赖webpack1,那B也挂掉了,如果C也依赖于B,跟着全部挂了。这种情况简直是噩梦。

npm就是为了解决这种问题出现的,这个npm不但可以将这个代码从网上下载下来,最重要的,可以管理不同包之间的关系,你依赖着谁,而且你依赖的那个版本号是多少,你当前的版本号是多少,这个就是npm的作用,非常方便。

npm在安装 node 的时候会同步安装到我们的电脑中。

npm init

默认安装一个 package.json 的文件,也可直接使用 npm init --yes 进行安装。

在这里插入图片描述
我们先来介绍几个重要字段。

  • name :当前包的名字,也就是最终发布到 npm官网上包的名字,不能和已有的包重名。
  • version: 当前包的版本号 。
  • main:当前包的入口文件 ,也就是使用 require 默认引入的文件。
  • scripts:可以配置一些 执行脚本 。
  • license:协议许可。

管理本地安装的npm包的最佳方法是创建一个 package.json文件,package.json的详细介绍请看这篇文章

npm init 命令的原理并不复杂,调用脚本,输出一个初始化的package.json 文件就是了。

依赖包安装 npm install

依赖管理是 npm 的核心功能,通过npm install <package> 安装指定的包,简写为 npm i

默认配置下 npm 会从默认的源 (Registry) 中查找该包名对应的包地址,并下载安装。但在 npm 的世界里,除了简单的指定包名, package 还可以是一个指向有效包名的 http url或者是git url/文件夹路径。

可以使用下面的命令来安装一个包:

npm install <package>

# 简写
npm i <package>

移除包可以用指令:

npm uninstall <package>

安装方式分为 本地安装(项目依赖)和 全局安装(命令行工具)。

安装本地包

我们在共享依赖包时,并不是非要将包发表到 npm 源上才可以提供给使用者来安装。这对于私有的不方便 publish 到远程源(即使是私有源),或者需要对某官方源进行改造,但依然需要把包共享出去的场景来说非常实用。

nodejs 应用开发中不可避免有模块间调用,例如在实践中经常会把需要被频繁引用的配置模块放到应用根目录;于是在创建了很多层级的目录、文件后,很可能会遇到这样的代码:

const config = require('../../../../config.js');

这样的路径引用不利于代码的重构,需要把这个模块分离出来供应用内其他模块共享。例如这个例子里的 config.js 非常适合封装为 package 放到 node_modules 目录下,共享给同应用内其他模块。

无需手动拷贝文件或者创建软链接到 node_modules 目录,npm 有更优雅的解决方案:

  1. 创建 config
    新增 config 文件夹; 重命名 config.jsconfig/index.js 文件; 创建 package.json 定义 config 包。

    {
    	"name": "config",
        "main": "index.js",
    	"version": "0.1.0"
    }
    
  2. 在应用层 package.json 文件中新增依赖项,然后执行 npm install

      {
    		"dependencies": {
        		"config": "file:./config"
    		}
      }
    

    此时,查看 node_modules 目录我们会发现多出来一个名为 config,指向上层 config/ 文件夹的软链接。这是因为 npm 识别 file: 协议的url,得知这个包需要直接从文件系统中获取,会自动创建软链接到 node_modules 中,完成“安装”过程。

    相比手动软链,我们既不需要关心 windowslinux 命令差异,又可以显式地将依赖信息固化到 dependencies 字段中,开发团队其他成员可以执行 npm install 后直接使用。

全局安装

全局安装一般是用来安装命令行工具,诸如webpackglup等,我们只需要在后面加上-g即可,比如:

npm install -g webpack

npm scripts

npm scriptsnpm 另一个很重要的特性。通过在 package.jsonscripts 字段定义一个脚本,例如:

{
    "scripts": {
        "echo": "echo HELLO WORLD"
    }
}

我们就可以通过 npm run echo 命令来执行这段脚本,像在 shell 中执行该命令 echo HELLO WORLD 一样,看到终端输出 HELLO WORLD

npm scripts 提供了一个简单的接口用来调用工程相关的脚本。

  • npm run 命令执行时,会把 ./node_modules/.bin/ 目录添加到执行环境的 PATH 变量中,因此如果某个命令行包未全局安装,而只安装在了当前项目的 node_modules 中,通过 npm run 一样可以调用该命令。
  • 执行 npm 脚本时要传入参数,需要在命令后加 -- 标明, 如 npm run test -- --grep="pattern" 可以将 --grep="pattern" 参数传给 test 命令
  • npm 提供了 prepost 两种钩子机制,可以定义某个脚本前后的执行脚本。
  • 运行时变量:在 npm run 的脚本执行环境内,可以通过环境变量的方式获取许多运行时相关信息(通过 process.env 对象访问获得)。

配置

npm config

npm cli 提供了 npm config 命令进行 npm 相关配置,通过 npm config ls -l 可查看 npm 的所有配置,包括默认配置。可在官方文档中查看所有配置项

修改配置的命令为 npm config set <key> <value>,以下是常见重要配置:

  • proxy, https-proxy:指定 npm 使用的代理
  • registry:指定 npm 下载安装包时的源,默认为 https://registry.npmjs.org/ 可以指定为私有 Registry
  • package-lock:指定是否默认生成 package-lock 文件,建议保持默认 true

删除指定的配置项命令为 npm config delete <key>

npmrc 文件

除了使用 CLInpm config 命令显示更改 npm 配置,还可以通过 .npmrc 文件直接修改配置。

.npmrc 文件优先级由高到低包括:

  • 工程内配置文件
  • 用户级配置文件
  • 全局配置文件(即npm config get globalconfig 输出的路径)
  • npm内置配置文件

通过这个机制,我们可以方便地在工程跟目录创建一个 .npmrc 文件来共享需要在团队间共享的 npm 运行相关配置。

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

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

相关文章

大数据-玩转数据-Flink状态后端(下)

一、状态后端 每传入一条数据&#xff0c;有状态的算子任务都会读取和更新状态。由于有效的状态访问对于处理数据的低延迟至关重要&#xff0c;因此每个并行任务(子任务)都会在本地维护其状态&#xff0c;以确保快速的状态访问。 状态的存储、访问以及维护&#xff0c;由一个…

goweb入门

创建gomod项目 go mod init web01新建main.go package mainimport ("fmt""net/http" )func handler(writer http.ResponseWriter, request *http.Request) {fmt.Fprintf(writer, "Hello World,%s!", request.URL.Path[1:]) } func main() {fmt…

Mysql基于成本选择索引

本篇文章介绍mysql基于成本选择索引的行为&#xff0c;解释为什么有时候明明可以走索引&#xff0c;但mysql却没有走索引的原因 mysql索引失效的场景大致有几种 不符合最左前缀原则在索引列上使用函数或隐式类型转换使用like查询&#xff0c;如 %xxx回表代价太大索引列区分度过…

PHP8中获取并删除数组中最后一个元素-PHP8知识详解

在php8中&#xff0c;array_pop()函数将返回数组的最后一个元素&#xff0c;并且将该元素从数组中删除。语法格式如下&#xff1a; array_pop(目标数组) 获取并删除数组中最后一个元素&#xff0c;参考代码&#xff1a; <?php $stu array(s001>明明,s002>亮亮,s…

Ansible数组同步至Shell脚本数组中

1、ansible中定义数组&#xff0c;我以 ccaPojectList 数组为例子,如下图数组内容 2、需要写一个j2模板的Shell脚本&#xff0c;在j2模板的Shell脚本中引用ansible的 ccaPojectList 数组&#xff0c;大致如下图&#xff1a; {% for item in ccaPojectList %} "{{ item }…

Linux JAVA环境的搭建tomcat的部署(含多实例)

tomcat tomcat是Apache软件基金会项目中的一个核心项目由 Apache、Sun 和其他一些公司及个人共同开发而成。tomcat 是 Java 语言开发的&#xff0c;Tomcat 服务器是一个免费的开放源代码的 Web 应用服务器. tomcat的组成 tomcat用于支持Java Servlet和JSP。它是一个重要的We…

手动开发-简单的Spring基于注解配置的程序--源码解析

文章目录 设计注解$设计容器 $#完整代码# 在前文中 《手动开发-简单的Spring基于XML配置的程序–源码解析》&#xff0c;我们是从XML配置文件中去读取bean对象信息&#xff0c;再在自己设计的容器中进行初始化&#xff0c;属性注入&#xff0c;最后通过getBean()方法进行返回。…

Service Mesh目的:是解决系统架构微服务化后的服务间通信和治理问题。

参考链接&#xff1a;https://www.zhihu.com/tardis/bd/art/397945267?source_id1001 1、Service Mesh 是什么 Service Mesh的定义&#xff1a; 服务网格是一个基础设施层&#xff0c;用于处理服务间通信。云原生应用有着复杂的服务拓扑&#xff0c;服务网格保证请求在这些…

Docker:01 OverView

Docker&#xff1a;01 OverView 基本介绍 Docker是一个用于开发、交付、运行应用程序的开放平台&#xff0c;可以使应用程序与基础架构分开&#xff0c;以便快速交付软件。 Docker在一个被叫做容器的隔离环境下&#xff0c;提供了打包和运行的能力。 容器非常轻量化&#x…

[SICTF 2023] webmisc

文章目录 webBaby_PHP涉及知识点 我全都要RCE你能跟得上我的speed吗 miscPixel_art攻破这个压缩包&#xff01; web Baby_PHP 涉及知识点 php解析特性apache换行解析漏洞无参RCE 源代码 <?php highlight_file(__FILE__); error_reporting(0);$query $_SERVER[QUERY_ST…

【新版】软考 - 系统架构设计师(总结笔记)

个人总结学习笔记&#xff0c;仅供参考&#xff01;&#xff01;&#xff01; →点击 笔者主页&#xff0c;欢迎关注哦&#xff08;互相学习&#xff0c;共同成长&#xff09; 笔记目录 &#x1f4e2;【系统架构设计系列】系统架构设计专业技能 计算机组成与结构操作系统信…

AI系统论文阅读:SmartMoE

提出稀疏架构是为了打破具有密集架构的DNN模型中模型大小和计算成本之间的连贯关系的——最著名的MoE。 MoE模型将传统训练模型中的layer换成了多个expert sub-networks&#xff0c;对每个输入&#xff0c;都有一层special gating network 来将其分配到最适合它的expert中&…

UMA 2 - Unity Multipurpose Avatar☀️九.Expressions表情管理与表情插件推荐 (口型同步 / 表情管理)

文章目录 🟥 Expressions文件位置🟧 功能 : 解决嘴巴张开问题🟨 Expressions : 表情面板API讲解🟩 表情插件推荐 : 口型同步 / 表情管理🟥 Expressions文件位置 Expressions也是UMA内置5种实用Recipes之一,位置如下. 使用方法: 如下图所示,将Recipes拖到Additional…

【ESP-S3-BOX-Lite花屏问题】:Github下载源码(出厂源码factory_demo)编译调试到ESP-S3-BOX-Lite中出现花屏现象

项目场景&#xff1a; 最近拿到了一块乐鑫的 ESP-S3-BOX-Lite &#xff08;esp-box: ESP-BOX 是乐鑫信息科技&#xff09; 详细资料&#xff08;esp32_s3_box_lite&#xff09; 版本信息 ESP-BOX依赖的 ESP-IDF分支信息支持状态master> release/v5.1 commit id: 22cfbf3…

基于javaweb的家庭理财管理系统(servlet+jsp)

一、系统简介 本项目采用工具开发&#xff0c;jspservletjquery技术编写&#xff0c;数据库采用的是mysql&#xff0c;navicat开发工具。 系统一共分为2个角色分别是&#xff1a;管理员&#xff0c;用户 获取方式 xystgl master 码盗_java_bishe / java系统 GitCodeGitC…

Edge浏览器没有让我失望! 今天终于可以在win10中模拟IE内核进行前端测试了!

前言 &#x1f61d; ietest现在是不是不好用了? Edge浏览器仿真是不是不见了&#xff1f; 如图 如果我们在前端开发javascript遇见一些老旧的语法标准&#xff0c;想要测试一下都难&#xff0c;想想都抓狂!&#x1f624;&#x1f624; 不过不用担心&#xff0c;经过这几天的…

娱乐时间 —— 用python将图片转为excel十字绘

最近看蛮多朋友在玩&#xff0c;要么只能画比较简单的&#xff0c;要么非常花时间。想了下本质上就是把excel对应的单元格涂色&#xff0c;如果能知道哪些格子要上什么颜色&#xff0c;用编程来实现图片转为excel十字绘应该是很方便的。 图片的每一个像素点都可以数值化&#x…

人工智能TensorFlow PyTorch物体分类和目标检测合集【持续更新】

1. 基于TensorFlow2.3.0的花卉识别 基于TensorFlow2.3.0的花卉识别Android APP设计_基于安卓的花卉识别_lilihewo的博客-CSDN博客 2. 基于TensorFlow2.3.0的垃圾分类 基于TensorFlow2.3.0的垃圾分类Android APP设计_def model_load(img_shape(224, 224, 3)_lilihewo的博客-CS…

C语言指针详解(1)------指针类型(简单例子+详细讲解)

C语言指针类型详解及举例 此文介绍了C语言中常见的6种指针,对每种指针进行了介绍,并举出相应的例子供大家理解学习. 文章目录 C语言指针类型详解及举例1.字符指针2.数组指针3.指针数组4.函数指针5函数指针数组6指向函数指针数组的指针 1.字符指针 字符指针是指向字符数组或字符…

vue学习之事件绑定

事件绑定 创建 demo5.html,内容如下 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</…