| |
|
开发:
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包管理工具的版本号
在项目中安装包的命令
初次安装包后会出现的文件初次安装包后在项目文件夹中会多出现两个文件,分别是node_modules和package-lock.json. node_modules这个文件夹中会存放你在该项目中安装的所有的包。在用require()导入第三方模块的时候,就是在这个文件中查找并加载。 package-lock.json配置文件用来记录node_module文件中每个包的下载信息,例如版本号、包名、下载地址等等。 注意点:程序员不要手动修改package-lock.json和node_module文件里面的任何代码,npm包管理工具会自动的维护他们 安装指定版本的包默认情况下,使用npm install命令安装的包都会是最新版本的包。因此如果想要安装指定版本的包可以通过如下代码来安装。
包的语义化版本规范包的版本号是以‘ 点分十进制 ’形式定义的,总共有三位数字。例如1.0.0。 点分十进制:就是以点作为分割符,每一位数都是十进制。 其中每一位数字代表的含义如下: 第一位数字:大版本 第二位数字:功能版本 第三位数字:Bug修复版本 版本提升规则:只要前面版本号增长了,则后面版本号归零。 注意点:第一位版本号只可以增长不可以减少,第二位版本号也只能增长(只有说第一位版本号它归零,其他情况只能作加法),第三位数与第二位数的规范同理。 包的管理配置文件npm规定,在项目根目录中,必须提供一个package.json包管理配置文件。用来记录与项目有关的一些配置信息,例如: 1.项目的名称、版本号、描述。 2.项目中用到了哪些包。 3.只在开发期间会用到的包,在项目上线和开发都会用到的包 快速创建package.json文件npm包管理工具里面提供了一个快捷命令,可以在执行命令时所处的目录中,快速创建一个package.json包管理配置文件。可以通过如下命令:
如下是快速创建一个包管理配置文件的文件内容: ?注意点:1.上述命令只能在英文目录下成功运行,所以项目文件夹一定要使用因为命名,不要出现中文,与不要出现空格。 ? ? ? ? ? ? ? ? 2.运行npm install命令的时候,npm包管理工具会自动把包的名称与版本号,记录到package.json文件中。 多人协作做项目包引发的问题第三方包的体积过大,不方便团队成员之间共享项目的源代码,因此在团队共享的时候我们要剔除node_module文件。所以我们在协作开发项目的时候,利用git上传代码的时候一定要忽略node_module文件。 记录项目中安装了的包的配置文件遇到以上问题就需要用到我们的包管理配置文件package.json。这个文件中有一个dependencies节点,这个节点专门记录你使用npm install命令安装了哪些包。 一次性安装所有的包当我们拿到一个剔除了node_module文件过后,先要把所有的包都下载到项目中去,项目才能运作起来。否则就会报以下错误: ?我们可以通过以下命令,一次性安装所有依赖的包:
安装多个包
卸载包
卸载包还有一种方式,就是在package.json包得配置文件中得dependencise节点中把你不需要的包给删除掉,然后再在项目文件的终端里运行npm install命令,然后就把把你不需要的那个包给卸载掉了。 devDependencies节点有一些包在开发项目的时候会用到,但是在项目上线以后就不会在用到了,则建议把这些包都记录在devDependencies节点中。 与之对应的如果有些包在开发和项目上线以后都在使用的包,就建议存放到dependencise节点中。 可以使用如下命令,将包记录到devDependencise节点中的命令为:
解决下包速度慢的问题在使用npm下包的时候,默认的是从国外的https://registry.npmjs.org/服务器进行下载,此时网络数据需要经过漫长的海底光缆,因此下包速度会很慢。 解决方案:淘宝在国内搭建了一个服务器,专门把国外的官网服务器上的包同步到国内服务器上,然后在国内提供了下包服务,极大的提高了下包速度。 图例演示如下: ?镜像:是一种文件的储存方式,一个磁盘上的数据在另一个磁盘上存在一个完全相同的副本即为镜像。 切换npm的下包镜像源下包镜像源:指的就是下包的服务器地址。
利用nrm快速切换镜像源为了更加方便的切换镜像源,我们可以安装nrm这个小工具。利用nrm提供的终端命令,可以快速查看和切换下包的镜像源。
包的分类被安装到项目node_module文件中的包都称之为项目包。项目包又分为开发依赖包和核心依赖包。 开发依赖包:只会在开发期间用到的包,被记录到devDependencise节点中的包。 核心依赖包:在开发期间和项目上线以后都会用到的包,会被dependencise节点中的包。
图例结构如下: ?全局包在执行npm install 命令时,如果提供了-g的参数,则会把包安装为全局包 全局包会被安装到C:\User\用户目录下\AppData\Roaming\npm\node_module目录下
注意点:1.只有工具性质的包,才有全局安装的必要性,因为他们提供了好用的终端命令 ? ? ? ? ? ? ? ? 2.判断莫格包是否需要全局安装后才能使用,可以参考官方提供的使用说明。 i5ting_toc将md文件转换为html文件并会在浏览器中打开
对于包的初识和基本应用,小白杨就介绍到这了。。。 |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
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年11日历 | -2024/11/23 22:57:18- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |