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

news2024/9/24 8:33:22

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.coloradmin.cn/o/1440297.html

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

相关文章

Redis 基本认识

文章目录 Redis八个特性Redis应用场景Redis应用缺陷Redis使用流程 Redis八个特性 速度快 原因: ① 单线程&#xff0c;避免了多线程竞争(如加锁/解锁)的时间开销 ② redis的数据存放在内存中 ③ 使用C语言编写&#xff0c;C语言更方便操做硬件 ④ Redis 源码优秀 利用键值对存…

新手指南:Postman 旧版本(历史版本)下载

随着技术的不断发展&#xff0c;有时候我们发现自己需要退回到使用 Postman 某个以往的版本。这篇文章旨在指导你如何安全地移除当前版本的 Postman、查找并获取旧版本。 从你的系统中移除 Postman 为了确保旧版本的 Postman 可以无障碍地安装&#xff0c;首先得从你的系统中…

嵌入式中经典面试题分析

1.关键字static的作用是什么&#xff1f;为什么static变量只初始化一次&#xff1f; 1&#xff09;修饰局部变量&#xff1a;使得变量变成静态变量&#xff0c;存储在静态区&#xff0c;存储在静态区的数据周期和程序相同&#xff0c; 在main函数开始前初始化&#xff0c;在退…

国产三维剖面仪—MPAS-100相控参量阵浅地层剖面仪

最近声学所东海站邹博士发来了他们最新的浅地层剖面仪—MPAS-100相控参量阵浅地层剖面仪的资料&#xff0c;市场型号GeoInsight&#xff0c;委托Ocean Physics Technology公司销售&#xff0c;地大李师兄的公司负责技术支持。 MPAS-100相控参量阵浅地层剖面仪就是俗称的三维浅…

Unity类银河恶魔城学习记录4-1,4-2 Attack Logic,Collider‘s collision excepetion源代码 P54 p55

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Entity.cs using System.Collections; using System.Collections.Generic; u…

C/C++ - 容器vector

目录 容器特性 构造函数 默认构造函数 填充构造函数 范围构造函数 拷贝构造函数 内存布局 大小函数 size() 函数 capacity() 函数 empty() 函数 resize() 函数 增加函数 push_back(const T& value) emplace_back(Args&&... args) push_back和empla…

linux(redhat)重置root密码

首先将root密码改成几乎不可能记住的密码 [rootexample ~]# echo fheowafuflaeijifehowf|passwd --stdin root Changing password for user root. passwd: all authentication tokens updated successfully.重启系统&#xff0c;进入救援模式 出现此页面&#xff0c;按e键 lin…

一个简单的2024龙年倒计时页面html源码

预览如下 复制粘贴下面的代码&#xff0c;另存为html文件即可打开&#xff0c;文字链接都可以更改&#xff1a; <!doctype html> <html> <head> <meta charset"utf-8"> <title>2024新年倒计时</title> <style>::-webki…

Linux操作系统基础(二):Linux操作系统概述

文章目录 Linux操作系统概述 一、Linux起源 二、Linux 的含义 三、Linux发行版 Linux操作系统概述 一、Linux起源 Linux创始人——林纳斯 托瓦兹 Linux 诞生于1991年&#xff0c;作者上大学期间实现的 Linux的特点&#xff1a;开源、免费、拥有最为庞大的源码贡献者 …

Mac安装Homebrew+MySQL+Redis+Nginx+Tomcat等

Mac安装HomebrewMySQLRedisNginxTomcat等 文章目录 Mac安装HomebrewMySQLRedisNginxTomcat等一、Mac安装Mysql 8①&#xff1a;下载②&#xff1a;安装③&#xff1a;配置环境变量④&#xff1a;外部连接测试 二、Mac安装Redis和可视化工具①&#xff1a;安装Redis01&#xff1…

STL常用容器—set容器

STL常用容器—set容器 1. set容器相关概念2. 初始化容器3. set容器插入和删除4. set容器大小和交换5. set容器的查找和统计6. set、multiset、unordered_set三者的区别7. pair对组的创建8. set容器的排序 参考博文&#xff1a;STL常用容器——set容器的使用 1. set容器相关概念…

SpringSecurity+OAuth2权限管理实战

Spring Security快速入门 官方文档&#xff1a; Spring Security :: Spring Security 功能&#xff1a; 身份认证&#xff08;authentication&#xff09; 授权&#xff08;authorization&#xff09; 防御常见攻击&#xff08;protection against common attacks&#xff…

Filter 实现过滤符合条件的请求并落库

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、配置过滤器类 二、定义数据表、实体类、Mapper 2.1 DDL 2.2 实体类 2.3 Mapper 三、创建一个过滤器 四、实现 Nacos 配置…

C语言第二十一弹---指针(五)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 转移表 1、转移表 总结 1、转移表 函数指针数组的用途&#xff1a;转移表 举例&#xff1a;计算器的⼀般实现&#xff1a; 假设我们需要做一个能够进行加减…

JavaScript 弹窗(Popup Windows)

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 在互联网时代&#xff0c;弹窗是一种常见的交互方式。它可以用于显示…

C语言笔试题之二进制求和

实例要求&#xff1a; 给定2个二进制字符串 a 和 b &#xff0c;以二进制字符串的形式返回它们的和&#xff1b; 案例展示&#xff1a; 实例分析&#xff1a; 1、利用strlen函数分别求出二进制字符串 a 和 b的长度&#xff1b;2、结果字符串长度为较长输入字符串加1&#xf…

数据结构入门(1)数据结构介绍

目录 前言 1. 什么是数据结构&#xff1f; 2.什么是算法&#xff1f; 3.数据结构和算法的重要性 前言 本文将开始介绍计算机里的数据结构。 数据结构是指数据对象中元素之间的关系&#xff0c;以及对这些关系的操作。数据结构可以分为线性结构和非线性结构。 线性结构是…

力扣面试题 05.06. 整数转换(位运算)

Problem: 面试题 05.06. 整数转换 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 1.通过将两个数进行异或操作求出两个数中不同的位(不同的位异或后为二进制1); 2.统计异或后不同的位的个数(即异或后二进制为1的个数) 复杂度 时间复杂度: O ( 1 ) O(1) O(1) 空间…

C++:STL - vector

C&#xff1a;STL - vector 构造函数修改操作push_backpop_backerase 访问操作emptyoperatror[]backfront 容量操作sizecapacityresizereserve C的vector是一种可变长度的动态数组&#xff0c;被广泛用于C编程中。它是标准模板库&#xff08;STL&#xff09;中的容器之一&#…

2024年 复习 HTML5+CSS3+移动web 笔记 之CSS遍 第6天

6.1 定位-相对和绝对和固定 6.2 相对和绝对和固定 6.3 堆叠顺序z-index 6.4 定位总结 6.5 CSS精灵 基本使用 6.6 案例 CSS精灵 京东服务 6.7 字体图标-下载和使用 6.8 字体图标-上传 6.9 垂直对齐方式vertical-align 6.10 过渡属性 6.11 修饰属性-透明度与光标类型 6.12 综合案…