npm+模块加载机制

news2024/12/26 22:53:45

1.npm与包

1.什么是包

Node.js中的第三方模块又叫做包。

就像电脑和计算机指的是相同的东西,第三方模块和包指的是同一个概念,只不过叫法不同。

2.包的来源

不同于Node,js中的内置模块与自定义模块,包是由第三方个人或团队开发出来的,免费供所有人使用。

注意:Node.js中的包都是免费且开源的,不需要付费即可免费下载使用

3.为什么需要包

由于Node.js的内置模块仅提供了一些底层的API。导致在基于内置模块进行项目开发的时,效率很低。

包是基于内置模块封装出来的,提供了更高级、更方便的API,极大地提高了开发效率

包和内置模块之间的关系,类似于jQuery和浏览器内置API之间的关系。

4.从哪里下载包npmjs.com

国外有一家IT公司,叫做npm,Inc.这家公司旗下有一个非常著名的网站:https://www.npmjs.com/,它是全球最大的包共享平台,你可以从这个网站上搜索到任何你需要的包。https://blog.csdn.net/cjj1065770310/article/details/126487626

npm,Inc,公司提供了一个地址为https://registry.npmjs.org/   的服务器,来对外共享所有的包,我们可以从这个服务器上下载自己所需要的包。

注意:

搜索包用:npmjs.com

下载包用:https://registry.npmjs.org/

 2.npm初体验

1.格式化时间的传统做法

//1.定义格式化时间方法
function dataFormat(dtStr) {
    const dt = new Data(dtStr)
    const y = padZero(dt.getFullYear())
    const m = padZero(dt.getMonth() + 1)
    const d = padZero(dt.getDate())

    const hh = padZero(dt.getHours())
    const mm = padZero(dt.getMinutes())
    const ss = padZero(dt.getSeconds())
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`

}
//定义补零的函数
function padZero(n) {
    return n > 9 ? n : '0' + n
}
module.exports = {
    dataFormat
}
//导入自定义的格式化时间的模块
const TIME = require('./06.mi.js');
//调用方法,进行时间格式化
const dt = new Data();
// console.log(dt)
const newDT = TIME.dataFormat(dt);
console.log(newDT)

2.格式化时间的高级做法

①使用npm包管理工具,在项目中安装格式化时间的包moment

②使用require()导入格式化时间的包

③参考moment的官方API文档对时间进行格式化

 3.在项目中安装包的命令

如果想在项目中安装指定名称的包,需要运行如下的命令:

 4.初次装包后多了哪些文件

初次装包完成后,在项目文件夹下多一个叫做node_modules的文件夹和package-lock.json的配置文件。

其中:

node_modules文件夹用来存放所有已安装到项目中的包。require()导入第三方包时,就是从这个目录中查找并加载包。

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

注意:程序员不要手动修改node_modules或package-lock.json文件中的任何代码,npm包管理工具会自动维护它们。

5.安装指定版本的包

默认情况下,使用npm install命令安装包的时候,会自动安装最新版本的包。如果需要安装指定版本的包,可以在包名之后,通过@符号指定具体的版本,例如:

6.包的语义化版本规范

 3.npm与包

3.3包管理配置文件

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

  •  项目的名称、版本号、描述等
  • 项目中都用到了哪些包
  • 那些包只是在开发期间会用到
  • 哪些包在开发和部署时都会需要用到

1.多人协作的问题

遇到的问题:第三方包的体积过大,不方便团队成员之间共享项目源代码

 解决方案:共享时剔除node_modules

2.如何记录项目中安装了哪些包

项目根目录中,创建一个叫做package.json的配置文件,即可用来记录项目中安装了哪些包。从而方便剔除node_modules目录之后,在团队成员之间共享项目的源代码。

注意:今后在项目开发中,一定要把node_modules文件夹,添加到.gitignore忽略文件中。

3.快速创建package.json

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

注意:

①上述命令只能在英文的目录下成功运行!所以,项目文件夹的名称一定要使用英文命名,不要使用中文,不能出现空格。 

②运行npm install命令安装包的时候,npm包管理工具会自动把包的名称版本号,记录到package.json中

4.dependencies节点

package.json文件中,有一个dependencies节点,专门用来记录您使用npm install命令安装了哪些包。

5.一次性安装所有的包

当我们拿到一个剔除了node_modules的项目之后,需要先把所有的包下载到项目中,才能将项目运行起来。

可以运行npm install命令(或npm i)一次性安装所有的依赖包: 

6.卸载包 

可以运行npm uninstall命令,来卸载指定的包:

 注意:npm uninstall命令执行成功后,会把卸载的包,自动从package.json的dependencies中移除掉。

7.devDependencies节点

如果某些包只在项目开发阶段会用到,在项目上线之后不会用到,则建议把这些包记录到devDependencies节点中。

与之对应的,如果某些包在开发项目上线之后都需要用到,则建议把这些包记录到dependencies节点中。

2.淘宝NPM镜像服务器

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

扩展:

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

3.切换npm的下包镜像源

 4.nrm

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

3.5包的分类

使用npm包管理工具下载的包,供分为两大类,分别是:

  • 项目包
  • 全局包

1、项目包

那些被安装到项目的node_moudules目录中的包,都是项目包

项目包又分为两类,分别是:

  • 开发依赖包(被记录devDependencies节点中的包,只在开发期间会用到)
  • 核心依赖包(被记录到dependencies节点中的包,在开发期间和项目上线之后都会用到)

2.全局包

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

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

注意:

①只有工具性质的包,才有全局安装的必要性。因为它们提供了好用的终端命令。

②判断某个包是否需要全局安装后才能使用,可以参考官方提供的使用说明即可。 

3.i5ting_toc

i5ting_toc是一个可以把md文档转为html页面的小工具,使用步骤如下:

3.6规范的包结构

在清楚了包的概念、以及如何下载和使用包之后,接下来,我们深入了解一下包的内部结构。

一个规范的包,它的组成结构,必须符合以下3点要求:

①包必须以单独的目录而存在

②包的顶级目录下要必须包含package.json这个包管理配置文件

③package.json中必须包含nanme,version,main这三个属性,分别代表包的名字、版本号、包的入口。

注意:以上3点要求是一个规范的包结构必须遵守的格式,关于更多的约束,可以参考如下网址:

http://yarnpkg.com/zh-Hans/docs/package-json

3.7开发属于自己的包

1.需要实现的功能

 ①格式化日期

转义HTML中的特殊字符

还原HTML中的特殊字符

格式化时间

 转义特殊字符

还原特殊字符

2.初始化包的 基本结构

①新建itheima-tools文件夹,作为包的根目录

②在itheima-tools文件夹中,新建如下三个文件:

  • package.json(包管理配置文件)
  • index.js(包的入口文件)
  • README.md(包的说明文档)

3.初始化package.json

 

 4.在index.js中定义格式化时间的方法

 package.json中的main的作用:当require中导入路径不写index.js是会从main中寻找路径 

 5.在index.js中定义转义HTML的方法

6.在index.js中定义还原HTML的方法

//这是包的入口文件
//定义格式化时间的函数
function dataFormat(dataStr) {
    const dt = new Date(dataStr)
    const y = dt.getFullYear()
    const m = padZero(dt.getMonth() + 1)
    const d = padZero(dt.getDate())
    const hh = padZero(dt.getHours())
    const mm = padZero(dt.getMinutes())
    const ss = padZero(dt.getSeconds())
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
//定义一个补零的函数
function padZero(n) {
    return n > 9 ? n : '0' + n
};
//定义转义HTML字符的函数
function htmlEscape(htmlStr) {
    return htmlStr.replace(/<|>|"|&/g, (match) => {
        switch (match) {
            case '<':
                return '&lt'
            case '>':
                return '&gt'
            case '"':
                return '&quot'
            case '&':
                return '&amp'
        }
    })
}
//定义还原字符串的函数
function htmlUnEscape(str) {
    return str.replace(/&lt;|&gt;|&quot;|&amp;/g, (match) => {
        switch (match) {
            case '&lt':
                return '<'
            case '&gt':
                return '>'
            case '&quot':
                return '"'
            case '&amp':
                return '&'
        }
    })
}
//向外暴露需要的成员;
module.exports = {
    dataFormat,
    htmlEscape,
    htmlUnEscape
}

7.将不同的功能进行模块化拆分

①将格式化时间的功能,拆分到src->dateFormat.js

②将处理HTML字符串的功能,拆分到src->htmlEscape.js

③在index.js中,导入两个模块,得到需要向外共享的方法

④在index.js中,使用module.exports把对应的方法共享出去

 入口index.js:

//这是包的入口文件
const date = require("./src/dateFormat")
const escape = require("./src/htmlEscape")
module.exports = {
    ...date,
    ...escape
}

dataFormat:

//定义格式化时间的函数
function dataFormat(dataStr) {
    const dt = new Date(dataStr)
    const y = dt.getFullYear()
    const m = padZero(dt.getMonth() + 1)
    const d = padZero(dt.getDate())
    const hh = padZero(dt.getHours())
    const mm = padZero(dt.getMinutes())
    const ss = padZero(dt.getSeconds())
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
//定义一个补零的函数
function padZero(n) {
    return n > 9 ? n : '0' + n
};
//向外暴露需要的成员;
module.exports = {
    dataFormat,

}

htmlEscape.js:

//定义格式化时间的函数
function dataFormat(dataStr) {
    const dt = new Date(dataStr)
    const y = dt.getFullYear()
    const m = padZero(dt.getMonth() + 1)
    const d = padZero(dt.getDate())
    const hh = padZero(dt.getHours())
    const mm = padZero(dt.getMinutes())
    const ss = padZero(dt.getSeconds())
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
//定义一个补零的函数
function padZero(n) {
    return n > 9 ? n : '0' + n
};
//向外暴露需要的成员;
module.exports = {
    dataFormat,

}

8.编写包的说明文档

包根目录中的README.md文件,是包的使用说明文档。通过它,我们可以事先把包的使用说明,以markdown的格式写出来,方便用户参考。

README文件中具体写什么内容,没有强制性的要求;只要能够清晰地把包的作用、用法、注意事项等描述清楚即可。

我们所创建的这个包的README.md文档中,会包含以下6项内容:

安装方式、导入方式、格式化时间、转义HTML中的特殊字符、还原HTML中的特殊字符、开源协议。

##安装
```
npm install new-package
```
##导入
```js
const aaa=require('new-package')
```
##格式化时间
```js
const aaa = require('./newPackage/index.js')
const dtStr = aaa.dataFormat(new Date())
console.log(dtStr)
//转换的结果2023-06-02 18:37:08

```
##转义HTML中的特殊字符
```js
//定义待转换的HTML字符串
const htmlStr = '<h1 title="abc">这是h1标签<span>123&nbsp;</span></h1>'
//调用htmlEscape方法进行转换
const str = aaa.htmlEscape(htmlStr)
//转换的结果&lth1 title=&quotabc&quot&gt这是h1标签&ltspan&gt123&ampnbsp;&lt/span&gt&lt/h1&gt
console.log(str)
```
##开源协议
ISC

3.8发布包

1.注册npm账号

2.登录npm账号

npm账号注册完成后,可以在终端中执行npm login命令,依次输入用户名、密码、邮箱后,即可登录成功。 

注意:在运行npm login命令之前,必须先把下包的服务器地址切换为 npm的官方服务器。否则会导致发布包失败!

 3.把包发布到npm上

将终端切换到包的根目录之后,运行npm publish命令,即可将包发布到npm上(注意:包名不能雷同

 4.删除已发布的包

运行npm unpublish包名--force命令,即可从npm删除已发布的包

 注意:

①npm inpublish命令只能删除72小时内发布的包

②npm unpublish删除的包,在24小时内不允许重复发布

③发布包的时候要慎重,尽量不要往npm上发布没有意义的包!

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

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

相关文章

Android 应用弹出悬浮窗

Android开发者经常遇到应用想弹出悬浮窗的操作&#xff0c;而且有可能还想要高层级弹窗&#xff0c;就像ipone的浮标touch一样。android当然也有类似的悬浮图标&#xff0c;比如前些年我们的流量监控提醒。 这里我们忽略UI美学&#xff0c;简单记录一下&#xff1a; 1、基本使…

mac os 安装rz/sz

说明&#xff1a;使用rz sz实现终端的文件传输&#xff0c;该命令主要使用场景为 macos中通过堡垒机登陆后无法使用ftp工具传输文件。 工具&#xff1a;iTerm2、lrzsz、homebrew 以及两个脚本文件&#xff08;iterm2-recv-zmodem.sh、iterm2-send-zmodem.sh&#xff09; …

基于确定有穷自动机(DFA算法)实现敏感词过滤

1.DFA算法简介 DFA(Deterministic Finite Automaton) 是一种非递归自动机&#xff0c;也称为确定有穷自动机。它是通过event和当前的state得到nextstate&#xff0c;即eventstatenextstate。 确定&#xff1a;状态以及引起状态转换的事件都是可确定的。 有穷&#xff1a;状态以…

EBU6304 Software Engineering 知识点总结_4 analysis, design, implementation, testing

analysis 仅仅从用户的需求来看得到的消息不全面&#xff0c;还需要分析。用户可能认为你明白了&#xff0c;或者他考虑不全面&#xff0c;觉得一些地方是不需要的。 因此我们需要分析来 Refining requirements。 gather requirements-analyse in real world context-develo…

(字符串 ) 剑指 Offer 58 - II. 左旋转字符串 ——【Leetcode每日一题】

❓剑指 Offer 58 - II. 左旋转字符串 难度&#xff1a;简单 字符串的左旋转操作是把字符串前面的若干个字符转移到字符串的尾部。请定义一个函数实现字符串左旋转操作的功能。比如&#xff0c;输入字符串"abcdefg"和数字2&#xff0c;该函数将返回左旋转两位得到的…

Codeforces Round 875 (Div. 2)

Problem - D - Codeforces 思路&#xff1a; 注意到bibj<2*n&#xff0c;所以ai*aj<2*n&#xff0c;即我们实际只需要枚举个a的匹配即可为了不重不漏&#xff0c;我们可以枚举x从1到&#xff0c;寻找所有与x匹配且大于等于x的[a,b]对这样复杂度就是 #include <bits…

OpenCV笔记整理【人脸检测之Harr级联分类器dlib库】

1. 级联分类器&#xff1a; OpenCV提供的级联分类器有Harr、HOG、LBP这3种&#xff0c;这些分类器以XML文件保存&#xff0c;这里主要演示Harr检测人脸&#xff08;OpenCV提供的分类器不仅限于检测人脸&#xff0c;还包括下表特征检测&#xff0c;当然OpenCV还支持训练自己的级…

Vim学习笔记【Ch02】

Vim学习笔记 系列笔记链接Ch02 Buffers, Windows, TabsBuffers什么是buffer查看所有bufferbuffer之间的切换删除buffer退出所有窗口 Windows窗口的创建窗口切换快捷键其他快捷键 Tabs什么是tabtab相关命令 window和buffer结合的3D移动小结 系列笔记链接 Ch00&#xff0c;Ch01 …

python介绍——入门

前言 Python 是一种面向对象的解释型计算机程序设计语言&#xff0c;它继承了传统编译语言的强大性和通用性&#xff0c;同时也借鉴了脚本语言和解释语言的易用性。今天我就来给大家简单介绍一下python&#xff1a; 一、python的起源 1989年的圣诞节期间&#xff0c;吉多▪范…

Redis底层学习(二)—存储类型-String篇

这里写目录标题 应用场景底层结构知识普及 应用场景 服务器命令&#xff1a; 1.单值缓存 存储key,value &#xff1a;SET key value2.对象缓存 存储key,value :SET key value&#xff08;json 格式数据&#xff09; 3.分布式锁 底层结构 我们可以通过命令查看 value…

C++ 学习 ::【基础篇:14】:C++ 类的基本成员函数:析构函数的作用 及 自定义析构函数情形

本系列 C 相关文章 仅为笔者学习笔记记录&#xff0c;用自己的理解记录学习&#xff01;C 学习系列将分为三个阶段&#xff1a;基础篇、STL 篇、高阶数据结构与算法篇&#xff0c;相关重点内容如下&#xff1a; 基础篇&#xff1a;类与对象&#xff08;涉及C的三大特性等&#…

scratch找食物 中国电子学会图形化编程 少儿编程 scratch编程等级考试一级真题和答案解析2023年5月

目录 scratch找食物 一、题目要求 1、准备工作 2、功能实现 二、案例分析

全志V3S嵌入式驱动开发(多按键输入驱动)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们说过&#xff0c;荔枝派的开发板上面&#xff0c;有4个按键本身不是通过gpio连接到soc上面的。它是通过ad的方法&#xff0c;连接到主芯片…

SpringCloud GateWay-Filter学习

3 Filter/过滤器 文章目录 3 Filter/过滤器1 GatewayFilter 使用 -- 路由过滤器2 GatewayFilter 使用 -- 自定义过滤器 路由过滤器可用于修改进入的HTTP请求和返回的HTTP响应Spring Cloud Gateway 内置了多种路由过滤器&#xff0c;他们都由GatewayFilter的工厂类来产生 1 Gat…

华为OD机试真题B卷 Java 实现【IPv4地址转换成整数】,附详细解题思路

一、题目描述 存在一种虚拟 IPv4 地址&#xff0c;由4小节组成&#xff0c;每节的范围为0~255&#xff0c;以#号间隔&#xff0c; 虚拟 IPv4 地址可以转换为一个32位的整数&#xff0c;例如&#xff1a; 128#0#255#255&#xff0c;转换为32位整数的结果为2147549183&#xff0…

以技术实践赋能开源安全|2023开放原子全球开源峰会开源安全技术与实践分论坛即将启幕

作为数字化转型时代的重要技术和协作模式&#xff0c;开源软件在各行各业得到广泛应用&#xff0c;由此也引发了诸多与安全相关的问题。6月12日&#xff0c;2023开放原子全球开源峰会“开源安全技术与实践”分论坛将在北京经开区北人亦创国际会展中心举行。 本次分论坛由开放原…

为什么说 Go 语言字符串是不可变的?

原文链接&#xff1a; 为什么说 Go 语言字符串是不可变的&#xff1f; 最近有读者留言说&#xff0c;平时在写代码的过程中&#xff0c;是会对字符串进行修改的&#xff0c;但网上都说 Go 语言字符串是不可变的&#xff0c;这是为什么呢&#xff1f; 这个问题本身并不困难&am…

SAP-QM-物料主数据-质量管理视图字段解析

过账到质检库存&#xff1a;要勾选&#xff0c;否则收货后库存不进入质检库存HU检验&#xff1a;收货到启用HU管理的库位时产生检验批&#xff0c;例如某个成品物料是收货到C002库位&#xff0c;该库位启用了HU管理&#xff0c;那么此处要勾选。但是如果勾选了&#xff0c;却收…

30天学会vue.js?|vue.js 3 移动应用开发实战 阅读笔记

最近又在折腾vuejs, 计划用30天的时间来掌握这个前端语言。 大概用了一周时间看完这本书。 这本书需要有编程基础的同学阅读。如果从零开始学前端的话&#xff0c;个人不建议&#xff0c;书本内容跳跃性很大&#xff0c;甚至个人觉得有点凌乱。PS&#xff1a;阅读此书一定要配…

黑马Redis视频教程实战篇(五)

目录 一、达人探店 1.1、发布探店笔记 1.2、查看探店笔记 1.3、点赞功能 1.4、点赞排行榜 二、好友关注 2.1、关注和取消关注 2.2、共同关注 2.3、Feed流实现方案 2.4、推送到粉丝收件箱 2.4、实现分页查询收邮箱 一、达人探店 1.1、发布探店笔记 发布探店笔记 探…