前端学习之路(6) npm详解

npm 是什么?

  1. npm(node package manager):node.js 的包管理器,用于node插件管理(包括安装、卸载、管理依赖等) ,npm 是随同 node.js 一起安装的包管理工具,能解决 node.js 代码部署上的很多问题,常见的使用场景有以下几种:
  • 允许用户从 npm 服务器下载别人编写的第三方包到本地使用。
  • 允许用户从 npm 服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到 npm 服务器供别人使用。
  1. npm是一个包管理器,它让 javascript 开发者分享、复用代码更方便.在程序开发中我们常常需要依赖别人提供的框架,写js 也不例外。这些可以重复的框架代码被称作包(package)或者模块(module),一个包可以是一个文件夹里放着几个文件,同时有一个叫做 package.json的文件.
  2. 一个网站里通常有几十甚至上百个package,分散在各处,通常会将这些包按照各自的功能进行划分(类似安卓开发中的划分子模块),但是如果重复造一些轮子,不如上传到一个公共平台,让更多的人一起使用、参与这个特定功能的模块。而npm 的作用就是让我们发布、下载一些JS轮子更加方便。
  3. 可以去官方网站:www.npmjs.com ,浏览、搜索想要的轮子,也可以直接在命令行中search一下。
  • 如:npm中搜索 jQuery

在这里插入图片描述

  1. 使用npm后可以非常方便地查看依赖的轮子是否有更新、是否需要下载新版本。现在知道npm是干什么的了。当人们说起“npm”时,可能在说三个东西:

    1.一个网站,就是前面提到用于搜索JS模块的网站:www.npmjs.com

    2.一个仓库,保存着人们分享的JS模块的大数据库

    3.命令行里的客户端,开发者使用它来管理、安装、发布模块

  2. 接地气的描述:npm 类似于如下各大手机应用市场
    在这里插入图片描述
  3. 只要开发者发布某个模块到仓库中,其他人就可以从npm网站或者命令行中下载、使用它了。

安装 npm

  1. 安装 node.js 的时候会相应的安装 npm,node.js 已经集成了 npm,所以安装 node.js 后 npm 也安装好了。
  • 下载官网:nodejs.org/en/
  • 中文学习node API 文档:nodejs.cn/
  • 查看本地 node 和 npm 是否安装成功
    在这里插入图片描述

更新 npm

  • npm 更新地可比 node勤快多了,因此你下载的node附带的 npm 版本可能不是最新的,你可以使用如下命令下载最新 npm:
npm install npm@latest -g
相当于
npm install 王者荣耀@最新版 -全局
华为应用市场 安装 王者荣耀@最新版 -全局

npm install -g npm 
  • 其中install不用介绍了,就是安装,后面的npm@latest就是@的格式,@后面加上版本号。在下载其他模块时也是这个格式。-g 代表全局安装。

package.json 文件

  • npm 的全称:Node Package Manager,中文意思:node包管理器。
  • 管理本地安装npm包的最好方式就是创建package.json文件。一个 package.json文件可以有以下几点作用:
  1. 作为一个描述文件,描述了你的项目依赖哪些包
  2. 允许使用“语义化版本规则”(后面介绍)指明你项目依赖包的版本
  3. 让你的构建更好地与其他开发者分享,便于重复使用
  • 案例:在新建的空文件夹中 npm 下载 jQuery 包
npm install jquery

在这里插入图片描述

  • 而 jQuery 就在 node_module 文件夹下:
    在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

package.json 如何创建

  • 使用 npm init 即可在当前目录创建一个 package.json 文件:
  • 通过如下一问一答的模式就创建好了一个 package.json 文件
    在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 输入npm init后会弹出一堆问题,可以输入对应内容,也可以使用默认值。在回答一堆问题后输入yes 就会生成图中所示内容的 package.json文件。
  • 如果嫌回答这一大堆问题麻烦,可以直接输入npm init --yes 跳过回答问题步骤,直接生成默认值的 package.json 文件:

package.json 的内容

  • package.json文件至少要有两部分内容:
  1. “name”:全部小写,没有空格,可以使用下划线或者横线
  2. “version”: x.x.x 的格式,符合 “语义化版本规则”
  • 如:
"name": "demo-package",
"version": "1.0.0",
  • 案例:在一个空文件夹下初始化创建 package.json
    在这里插入图片描述
    在这里插入图片描述

  • 这些默认生成的都可以去修改
    在这里插入图片描述

  • 其他内容:

    • description:描述信息,有助于搜索
    • main:入口文件,一般都是 index.js
    • scripts:支持的脚本,默认是一个空的 test
    • keywords:关键字,有助于在人们使用 npm search搜索时发现你的项目author :作者信息
    • license :默认是 MIT
    • bugs:当前项目的一些错误信息,如果有的话
    • 可以为init命令设置一些默认值,比如:
> npm set init.author.email "xxx@gmail.com"
> npm set init.author.name "xdr630"
> npm set init.license "MIT"
  • scripts 案例详解:把上面初始化的 package.json 做如下修改
    在这里插入图片描述
  • 执行
npm run abc

在这里插入图片描述

  • 查看
    在这里插入图片描述
  • 案例:把下载的jQuery配置记录到package.json中
  • 没安装之前的文件夹:

在这里插入图片描述

npm install jquery -D

在这里插入图片描述

  • 发现 pcakage.json 改变了
    在这里插入图片描述
  • 在安装个 bootstrap,这次不带 -D
npm install bootstrap 

在这里插入图片描述

  • 发现不带 -D ,放在dependencies,加上-D,就放在devDependencies
  • 通过 npm install 包名称 下载的文件都会保存在当前文件夹下的 node_module 下,如:
    在这里插入图片描述
  • 打开文件夹,发现有刚刚下载好的两个文件
  • 这就是刚刚 npm 下载的两个包,都在 node_module 下,并且记录的信息都在同一个 package.json
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

dependencies(生产环境)和 devDependencies(开发环境)的区别

  • 就是在项目的开发阶段就是开发环境;项目上线了,开始正式提供对外服务,上线后的阶段就是生产环境。 在生产环境下,一般会关掉错误报告,打开错误日志等操作。
  • devDependencies 配置的是开发环境,安装项目开发时所依赖的模块。比如像webpack工具,只是用来构建项目和打包,这些都是在开发阶段才使用的,等项目上线后就用不到webpack工具了,那么就可以把webpack安装到开发环境中,使用 --save-dev 命令安装到devdependencies下,命令语法:
npm install --save-dev packageName
# 简写
npm i -D packageName
  • dependencies配置的是生产环境,安装项目运行时所依赖的模块。比如jQuery库,等项目上线以后依然是要继续使用的,我们就要安装在生产环境中,如果没有把需要的依赖安装到生产环境中,项目上线运行时就有可能会报错。使用 --save 命令安装到 dependencies 下,命令语法:
npm install --save packageName
# 简写
npm i -S packageName
  • 总结
配置项dependenciesdevDependencies
dependencies–save 简写 -S生产环境,管理的依赖包在项目上线后依然有效
devDependencies–save-dev 简写 -D开发环境,管理的依赖包仅在开发阶段有效
  1. 使用npm安装依赖时,–save–save-dev
  • 使用–save安装的依赖,会被写到dependencies区块里面去。
  • 而使用–save-dev安装依赖,则会被写到devDependencies区块里面去
  • 什么都不写,只是本地安装,并非全局。这时候会被写到dependencies区块里面去。
  1. package.json 文件中dependenciesdevDependencies的区别
  • devDependencies 里面的依赖只用于开发环境,不用于生产环境。而 dependencies 依赖的包不仅开发环境能使用,生产环境也能使用。
  • 两种环境的的指定方式是通过配置文件中的NODE_ENV=developementNODE_ENV=production来指定是开发还是生产环境的。
  • 使用的一些构建工具例如glup、webpack这些只是在开发中使用的包,上线以后就和他们没关系了,所以将它写入devDependencies

指定安装包的版本

npm install jquery@3.4.1
npm install bootstrap@4.4.1

自定义 package.json 安装包文件

  • 首先在一个空的文件夹下使用 npm init 初始化生成一个 package.json 文件,打开对里面的内容进行添加,如:下载 jQuery 和 bootstrap 的包文件
    在这里插入图片描述
  • 使用命令 npm install 进行安装即可。这个命令会识别刚刚自定义 package.json 中需要安装的文件
  • npm install 可以简写 为 npm i

引用文件库

  • 一般引用都是直接在本地路径下:
<script src=/node_modules/jquery/dist/jquery.min.js'><script>
  • 通过定义变量引用:
  • require(名字),它是直接在node_modules中去寻找这个名字对应的文件夹,找不到就报错
const $ = require( 'jquery ' );
console.log($.addclass());

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HTTP2:netty http2 StreamChannel多流实现与Http2StreamFrame解码器的源码分析

netty http2 server侧的核心逻辑个人认为&#xff0c;主要在编解码处理器和Stream Transform Channel这块&#xff0c;分别处理Http2 消息帧的编解码&#xff0c;以及连接的多流处理机制。对应用的处理类分别&#xff1a; ChannelHandlerDescio.netty.handler.codec.http2.Htt…

编译OpenSSL时报错,Can‘t locate IPC/Cmd.pm in @INC

编译OpenSSL 3.0.1时报错&#xff0c;错误信息如下 解决方法&#xff1a; 安装perl-CPAN yum install -y perl-CPAN进入CPAN的shell模式&#xff0c;首次进入需要配置shell&#xff0c;按照提示操作即可&#xff08;本人perl小白&#xff0c;全部选择默认配置&#xff0c;高…

Python算法题集_环形链表

Python算法题集_环形链表 题234&#xff1a;环形链表1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【集合检索】2) 改进版一【字典检测】3) 改进版二【双指针】 4. 最优算法 本文为Python算法题集之一的代码示例 题234&#xff1a;环形链表 …

FPGA高端项目:解码索尼IMX327 MIPI相机转USB3.0 UVC 输出,提供FPGA开发板+2套工程源码+技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的 MIPI 编解码方案 3、本 MIPI CSI-RX IP 介绍4、个人 FPGA高端图像处理开发板简介5、详细设计方案设计原理框图IMX327 及其配置MIPI CSI RX图像 ISP 处理图像缓存UVC 时序USB3.0输出架构FPGA逻辑设计工程源码架构SDK软件工程源…

数学建模-灰色预测最强讲义 GM(1,1)原理及Python实现

目录 一、GM&#xff08;1&#xff0c;1&#xff09;模型预测原理 二、GM&#xff08;1&#xff0c;1&#xff09;模型预测步骤 2.1 数据的检验与处理 2.2 建立模型 2.3 检验预测值 三、案例 灰色预测应用场景&#xff1a;时间序列预测 灰色预测的主要特点是模型使用的…

改变AI服务器:探索界面互连芯片技术的创新突破

根据TrendForce的数据&#xff0c;AI服务器的出货量约为130,000台&#xff0c;占全球服务器总出货量的约1%。随着微软、Meta、百度和字节跳动等主要制造商相继推出基于生成式AI的产品和服务&#xff0c;订单量显著增加。预测显示&#xff0c;在ChatGPT等应用的持续需求推动下&a…

Java+微信小程序实现智慧家政系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 查询家政服务4.2 新增单条服务订单4.3 新增留言反馈4.4 小程序登录4.5 小程序数据展示 五、免责说明 一、摘要 1.1 项目介绍 基于微信小程序JAVAVueSpringBootMySQL的智慧家政系统&#xff0…

TCP 传输控制协议

1 TCP 1.1 TCP 最主要的特点 1.TCP 是面向连接的运输层协议。 2.每一条 TCP 连接只能有两个端点 (endpoint)&#xff0c;每一条 TCP 连接只能是点对点的&#xff08;一对一&#xff09;。 3.TCP 提供可靠交付的服务。 4.TCP 提供全双工通信。 5.面向字节流 TCP 中的“流…

redisson源码解析

由于synchronized跟ReetrantLock是JVM级别的锁&#xff0c;在分布式情况下失效&#xff0c;这时候我们通常会选择redisson基于redis封装好的分布式锁。下面我们一起来分析以下redisson的源码。 使用方式 流程 getLock源码 给命令执行器赋值给看门狗时间赋值&#xff0c;默认30…

【芯片设计- RTL 数字逻辑设计入门 11.1 -- 状态机实现 移位运算与乘法 1】

文章目录 移位运算与乘法状态机简介SystemVerilog中的测试平台VCS 波形仿真 阻塞赋值和非阻塞赋值有限状态机&#xff08;FSM&#xff09;与无限状态机的区别 本篇文章接着上篇文章【芯片设计- RTL 数字逻辑设计入门 11 – 移位运算与乘法】 继续介绍&#xff0c;这里使用状态机…

PCA与梯度上升法

PAC 主成分分析&#xff08;Principal Component Analysis&#xff09; 一个非监督的机器学习算法主要用于数据的降维通过降维&#xff0c;可以发现更便于人类理解的特征其他应用&#xff1a;可视化&#xff1b;去噪 如何找到这个让样本间间距最大的轴&#xff1f; 如何定义样…

【我与Java的成长记】之String类详解

系列文章目录 能看懂文字就能明白系列 C语言笔记传送门 Java笔记传送门 &#x1f31f; 个人主页&#xff1a;古德猫宁- &#x1f308; 信念如阳光&#xff0c;照亮前行的每一步 文章目录 系列文章目录&#x1f308; *信念如阳光&#xff0c;照亮前行的每一步* 前言一、字符串构…

zabbix配置主动监控

1.准备一台新的主机&#xff0c;安装相关软件包。 [rootsishi ~]# rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64/zabbix-release-5.0-1.el7.noarch.rpm [rootsishi ~]# yum -y install zabbix-agent2.修改zabbix-agent端的配置文件 [rootsishi ~]# vim /etc/z…

图像处理入门:OpenCV的基础用法解析

图像处理入门&#xff1a;OpenCV的基础用法解析 引言OpenCV的初步了解深入理解OpenCV&#xff1a;计算机视觉的开源解决方案什么是OpenCV&#xff1f;OpenCV的主要功能1. 图像处理2. 图像分析3. 结构分析和形状描述4. 动态分析5. 三维重建6. 机器学习7. 目标检测 OpenCV的应用场…

SegmentAnything官网demo使用vue+python实现

一、效果&准备工作 1.效果 没啥好说的&#xff0c;低质量复刻SAM官网 https://segment-anything.com/ 需要提一点&#xff1a;所有生成embedding和mask的操作都是python后端做的&#xff0c;计算mask不是onnxruntime-web实现的&#xff0c;前端只负责了把rle编码的mask解…

【MacOS】装 mac-win10 双系统(2017年的老mac,Intel芯片)

Navigator 一、前情二、完整过程2.1 Mac系统迁移2.2 分区合并2.3 下载win10镜像2.4 安装win102.5 安装驱动等2.6 设置默认启动系统 一、前情 昨天给学妹的mac装软件。发现之前她找维修店装了双系统&#xff0c;但是win10根本不能用&#xff0c;搞得乱七八糟的&#xff0c;于是…

产品经理学习-产品运营《海报制作》

如何策划一款优秀的海报 海报是什么&#xff1f; 是一种将文字和图片结合的信息传递形式&#xff1b;其作用和目的是把想传递给用户的信息高效的传递出去&#xff0c;让用户在极短的时间内产生兴趣&#xff0c;进而产生收藏、分享等行为。 海报的类型&#xff1a; 类型 特点 …

qt/c++实现表情选择框

&#x1f482; 个人主页:pp不会算法^ v ^ &#x1f91f; 版权: 本文由【pp不会算法v】原创、在CSDN首发、需要转载请联系博主 &#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 实现功能 。编解码的设计 。映射关系设计 。匹配机制设计 演示效…

上海泗博HART转ModbusTCP网关HME-635应用案例之组态王和超声波液位计通信

如今工业现场的应用也逐渐把现场的不同应用协议转换成以太网&#xff0c;以此来提升现场的通信速度和质量。Modbus TCP是工业以太网协议的一种&#xff0c;也是现场应用中最常使用的。本应用案例是基于Modbus TCP的组态王和基于HART的超声波液位计之间数据通讯的具体应用。 应用…

小白都能看懂的力扣算法详解——链表(一)

&#xff01;&#xff01;本篇所选题目及解题思路均来自代码随想录 (programmercarl.com) 一 203.移除链表元素 题目要求&#xff1a;给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回新的头节点。 203.…