IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 初识包及其基本使用 -> 正文阅读

[JavaScript知识库]初识包及其基本使用

首先我觉得作为一个前端人员来说,包这个东西很重要。他会帮助我们提高开发效率,缩短了大量的开发时间。所以我觉得认识包和会基本使用包很重要,当然想要自己去发个包,可以参考我上篇文章。

包的概念

在nodejs中第三方模块又叫做包,他们两个指向的是同一个东西,只是叫法不一样而已。

包的来源

不同于nodejs中的内置模块和自定义模块来说,包是有第三方个人和团队开发出来的,免费供程序员使用的,nodejs中的包都是免费且开源的。

包的作用

由于nodejs的内置模块只提供了一些底层的api,因此导致基于内置模块开发项目的时候,效率很低。这时候就出现了包,包是基于内置模块封装出来的,包提供了更高级,更方便的api,极大的提高了开发效率。因此包于内置模块的关系,就如同jQuery与浏览器内置的api的关系一样。

搜索包的地址:http://htttp://www.npmjs.com/? ? 这是全球最大的包共享平台。

下载包

npm,lnc公司给我们提供了一个包管理工具,我们可以使用这个包管理工具,从http://registry.npmjs.com/服务器把需要的包下载到本地使用。这个包管理工具的名字叫Node Package Manager(简称npm包管理工具),这个包管理工具在我们安装node.js的时候一起安装到用户的电脑上。

大家可以执行以下代码,来查看自己npm包管理工具的版本号

//执行以下这行代码就会出现你当前npm包管理工具的版本号
//在任意位置打开终端都可以查看
nmp -v

在项目中安装包的命令

//在项目中安装包的命令
npm install 包的完整名称


//在项目中安装包的简写命令
npm i 包的完整名称

初次安装包后会出现的文件

初次安装包后在项目文件夹中会多出现两个文件,分别是node_modulespackage-lock.json.

node_modules这个文件夹中会存放你在该项目中安装的所有的包。在用require()导入第三方模块的时候,就是在这个文件中查找并加载。

package-lock.json配置文件用来记录node_module文件中每个包的下载信息,例如版本号、包名、下载地址等等。

注意点:程序员不要手动修改package-lock.json和node_module文件里面的任何代码,npm包管理工具会自动的维护他们

安装指定版本的包

默认情况下,使用npm install命令安装的包都会是最新版本的包。因此如果想要安装指定版本的包可以通过如下代码来安装。

//安装指定版本的包

npm i 包名@指定版本号

//就是在包名后面加上@再加上需要安装包的版本号就可以了

包的语义化版本规范

包的版本号是以‘ 点分十进制 ’形式定义的,总共有三位数字。例如1.0.0。

点分十进制:就是以点作为分割符,每一位数都是十进制。

其中每一位数字代表的含义如下:

第一位数字:大版本

第二位数字:功能版本

第三位数字:Bug修复版本

版本提升规则:只要前面版本号增长了,则后面版本号归零。

注意点:第一位版本号只可以增长不可以减少,第二位版本号也只能增长(只有说第一位版本号它归零,其他情况只能作加法),第三位数与第二位数的规范同理。

包的管理配置文件

npm规定,在项目根目录中,必须提供一个package.json包管理配置文件。用来记录与项目有关的一些配置信息,例如:

1.项目的名称、版本号、描述。

2.项目中用到了哪些包。

3.只在开发期间会用到的包,在项目上线和开发都会用到的包

快速创建package.json文件

npm包管理工具里面提供了一个快捷命令,可以在执行命令时所处的目录中,快速创建一个package.json包管理配置文件。可以通过如下命令:

//作用:在执行命令所处的目录中,快速创建package.json包管理配置文件

npm init -y

如下是快速创建一个包管理配置文件的文件内容:

?注意点:1.上述命令只能在英文目录下成功运行,所以项目文件夹一定要使用因为命名,不要出现中文,与不要出现空格。

? ? ? ? ? ? ? ? 2.运行npm install命令的时候,npm包管理工具会自动把包的名称与版本号,记录到package.json文件中。

多人协作做项目包引发的问题

第三方包的体积过大,不方便团队成员之间共享项目的源代码,因此在团队共享的时候我们要剔除node_module文件。所以我们在协作开发项目的时候,利用git上传代码的时候一定要忽略node_module文件。

记录项目中安装了的包的配置文件

遇到以上问题就需要用到我们的包管理配置文件package.json。这个文件中有一个dependencies节点,这个节点专门记录你使用npm install命令安装了哪些包。

一次性安装所有的包

当我们拿到一个剔除了node_module文件过后,先要把所有的包都下载到项目中去,项目才能运作起来。否则就会报以下错误:

?我们可以通过以下命令,一次性安装所有依赖的包:

//可以通过 npm install 命令来安装所有的包
//执行npm install 命令时,npm管理工具会先读取package.json中的dependencies节点
//读取到记录的所有依赖包和版本号之后,npm包管理工具会把这些包一次性下载到项目中去
//所以一定得要创建一个package.json包管理配置文件

npm install

安装多个包

//安装多个包得命令如下

npm i 包名1 包名2

卸载包

//卸载包得命令

npm uninstall 包名

//当npm uninstall命令执行成功过后,会把包卸载,npm包管理工具会自动得从package.json得dependencise节点中删除

卸载包还有一种方式,就是在package.json包得配置文件中得dependencise节点中把你不需要的包给删除掉,然后再在项目文件的终端里运行npm install命令,然后就把把你不需要的那个包给卸载掉了。

devDependencies节点

有一些包在开发项目的时候会用到,但是在项目上线以后就不会在用到了,则建议把这些包都记录在devDependencies节点中。

与之对应的如果有些包在开发和项目上线以后都在使用的包,就建议存放到dependencise节点中。

可以使用如下命令,将包记录到devDependencise节点中的命令为:

//安装指定的包,并记录到devDependencise节点中

npm i 包名 -D

//注意:上述命令是简写形式,等价与下面完整的写法

npm install 包名 --save-dev

解决下包速度慢的问题

在使用npm下包的时候,默认的是从国外的https://registry.npmjs.org/服务器进行下载,此时网络数据需要经过漫长的海底光缆,因此下包速度会很慢。

解决方案:淘宝在国内搭建了一个服务器,专门把国外的官网服务器上的包同步到国内服务器上,然后在国内提供了下包服务,极大的提高了下包速度。

图例演示如下:

?镜像:是一种文件的储存方式,一个磁盘上的数据在另一个磁盘上存在一个完全相同的副本即为镜像。

切换npm的下包镜像源

下包镜像源:指的就是下包的服务器地址。

#查看当前的下包镜像源,执行以下命令

npm config get registry

#将下包镜像源切换为淘宝镜像源

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

#检查镜像源是否下载成功

npm config get registry

利用nrm快速切换镜像源

为了更加方便的切换镜像源,我们可以安装nrm这个小工具。利用nrm提供的终端命令,可以快速查看和切换下包的镜像源。

//利用npm包管理器,将nrm安装为全局可用的工具

npm i nrm -g

//查看所有的可用的镜像源

 nrm ls

//将镜像源切换为taobao 镜像源

nrm use taobao

包的分类

被安装到项目node_module文件中的包都称之为项目包。项目包又分为开发依赖包核心依赖包

开发依赖包:只会在开发期间用到的包,被记录到devDependencise节点中的包。

核心依赖包:在开发期间和项目上线以后都会用到的包,会被dependencise节点中的包。

//开发依赖包 会被记录到devDependencise节点中

npm i 包名 -D

//核心依赖包 会被记录到dependencise节点中

npm i 包名

图例结构如下:

?全局包

在执行npm install 命令时,如果提供了-g的参数,则会把包安装为全局包

全局包会被安装到C:\User\用户目录下\AppData\Roaming\npm\node_module目录下

//全局安装指定的包
npm i 包名 -g

//卸载全局安装的包

npm uninstall 包名 -g

注意点:1.只有工具性质的包,才有全局安装的必要性,因为他们提供了好用的终端命令

? ? ? ? ? ? ? ? 2.判断莫格包是否需要全局安装后才能使用,可以参考官方提供的使用说明。

i5ting_toc将md文件转换为html文件并会在浏览器中打开

//将i5ting_toc安装为全局包

npm i -g i5ting_toc

//调用i5ting_toc 轻松实现将md文件转换为html文件

i5ting_toc -f 要转换文件的路径 -o

对于包的初识和基本应用,小白杨就介绍到这了。。。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-09 16:11:30  更:2021-10-09 16:13:06 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/18 23:10:08-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码