当前位置: 首页 > article >正文

5.npm包

文章目录

    • @[TOC](文章目录)
  • 3.npm与包
    • 3.1.包
    • 3.2.npm体验
    • 在项目中安装包的命令
    • 包管理配置文件
    • 一次性安装开发项目时安装的包
    • 如何从项目中卸载包
    • devDependencies节点的作用
    • 解决下载包速度比较慢的问题
    • nrm工具,利用其提供的终端命令,可以快速查看和切换下包的镜像源
    • 包的分类
      • 全局包
      • i5ting_toc
      • 规范的包结构
    • 如何开发包
      • 需要实现的功能
      • 初始化package.json文件
      • index.js文件中定义对应的方法
      • 测试是否可以初始化时间
      • 在入口文件index.js中定义转义标签的函数
      • test.js文件中
      • 将转换后的标签转为标签
    • 将不同的功能进行模块化划分
      • 新建文件夹src里面放对应每个方法的js文件,在入口文件index.js文件中`require`关键字引入对应的js文件,再对外暴露,供外部使用就可以了
    • 如何发布npm包
    • 发布包命令 npm publish

3.npm与包

3.1.包

🥞包的来源:不同于内置模块与自定义模块,包是第三方个人或团队开发出来的,免费供所有人使用的。
🚕原因:由于内置模块仅提供了一些底层的API,导致在基于内置模块进行项目开发时,效率会很低。
🌮基于内置模块封装了更高级、更方便的api,随之效率也会提高。
🍕从哪里下载包,npmjs.com网站

3.2.npm体验

格式化时间的传统作法

  • 定义格式化时间的模块

15.dateFormat.js

//定义格式化时间的方法
function dateFormat(dtStr){
	const dt = new Date(dtStr);
	 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 = {
    dateFormat
}
  • 引入格式化时间模块
const TIME = require('./15.dateFormat');
const dt = new Date();
console.log(TIME.dateFormat(dt));

较麻烦,如果使用第三方封装好的包,则简化了很多步骤,只需安装对应的包,再引入使用即可

在项目中安装包的命令

🥟如果想在项目中安装指定名称的包,需要执行以下命令即可

npm insatll 包的完整名称

在项目中新建文件,moment案例.js

//1.导入需要的包
//注意:导入的名称,就是装包时候的名称
const moment = require('moment');
const time = moment().format('YYYY-MM-DD HH:mm:ss'); //获取当前时间
console.log(time) //输出当前时间;

🌯如何安装指定版本的包
需要在包名称后面加上@具体版本号即可
🧀包的语义化版本规范
包的版本号是以"点分十进制"形式定义的,总共有三个数字,例如1.10.2

包管理配置文件

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

  • 项目名称、版本号、描述等
  • 项目中用到了哪些包
  • 哪些包只在开发期间会用到
  • 哪些包在开发和部署时都会用到
  • 也解决了多人协作而产生的问题

当团队多人开发时,由于第三方包占用空间较大,团队成员需要重新安装即可

一次性安装开发项目时安装的包

执行命令npm i即可

如何从项目中卸载包

执行命令npm uninstall 包名字

devDependencies节点的作用

记录在开发环境中安装的包

解决下载包速度比较慢的问题

🍔切换npm的下包镜像源(就是下包的服务器地址)

//1.查看当前的下包镜像源
npm config get registry
//2.将下包的镜像源切换为淘宝镜像源
npm config set registry=https://registry.npm.taobao.org/
//3.检查镜像源下载是否成功
npm config get registry

在这里插入图片描述

nrm工具,利用其提供的终端命令,可以快速查看和切换下包的镜像源

//把nrm安装为全局可用的工具
npm i nrm -g
//查看所有可用的镜像源
nrm ls
//将下载的镜像源切换为taobao镜像
nrm use taobao

包的分类

全局包

🧨在执行了npm i命令时,如果提供了-g参数,则会把包安装为全局包
全局包会被安装到C:\Users\用户目录\AppData\Roaming\npm\node_modules目录下

i5ting_toc

🌮可以把md格式的文档转转化为html格式的小工具

规范的包结构

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

  • 必须以单独的目录而存在
  • 包的顶级目录下必须包含package.json这个包管理配置文件
  • package.json中必须包含name/version/main三个属性,分别代表包的名字、版本号、包的入口

如何开发包

需要实现的功能

//🍔1.导入包
const dkc = require('dkc-utils') 
//2.转义html中的特殊字符------
const htmlStr = ' <h1 style="color:red;">你好!&copy;<span>小黄!</span></h1>'
const str = dkc.htmlEscape(htmlStr)
console.log(str)
//&lt;h1 style=&quot;color:red;&quot;&gt;你好!&amp;copy;&lt;span&gt;小黄!&lt;/span&gt;7lt;/h1&gt;
//3.console.log(str)

🍕2.初始化包的基本结构

  • 1.新建一个文件夹,在这个文件夹中,新建如下三个文件:
  • package.json(包管理配置文件)
  • index.js(包的入口文件)
  • README.md(包的说明文档)

初始化package.json文件

{
{
    "name": "chenshen-tools",
    "version": "1.0.0",
    "description": "提供了时间初始化,HTMLEscape的功能",
    "main": "index.js",
    "license": "ISC"
}
}

index.js文件中定义对应的方法

//入口文件
//定义格式化时间的函数
function dateFormat(date) {

    const dt = new Date(date);

    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(num) {
    return num > 9 ? num : '0' + num;
}
module.exports = {
    dateFormat
}

测试是否可以初始化时间

新建test.js文件

const tools = require('./index.js');
const str = tools.dateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss')
console.log(str);

在入口文件index.js中定义转义标签的函数

//转义字符
function escapeChar(htmlStr) {
return htmlStr.replace(/[<>&*]/g,(match) => {
        switch (match) {
            case '<':
                return '&lt;'
            case '>':
                return '&gt;'
            case '"':
                return '&quot;'
            case '&':
                return '&amp;'

        }
    })

}
module.exports = {
dateFormat,escapeChar
}

test.js文件中

const htmlStr ='<h1 class="title">这是h1标题<span class="red">红色span&nbsp;</span></h1>'
const str2 = tools.escapeChar(htmlStr)
console.log(str2);

将转换后的标签转为标签

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 = {
	dateFormat,escapeChar,htmlUnEscape
}

将不同的功能进行模块化划分

新建文件夹src里面放对应每个方法的js文件,在入口文件index.js文件中require关键字引入对应的js文件,再对外暴露,供外部使用就可以了

在这里插入图片描述

如何发布npm包

  • 1.注册npm账号
    在这里插入图片描述

发布包命令 npm publish

  • 在终端中登录npm,(而不是镜像地址的npm)发布对应的包。

http://www.kler.cn/a/456454.html

相关文章:

  • css 类名
  • Kafka高性能设计
  • C++ 设计模式:策略模式(Strategy Pattern)
  • 嵌入式入门Day34
  • 【视觉惯性SLAM:四、相机成像模型】
  • AI大模型语音识别转文字
  • 如何配置线程池参数,才能创建性能最好、最稳定的Spring异步线程池?
  • StarRocks元数据无法合并
  • 力扣-数据结构-5【算法学习day.76】
  • Spring 框架基础知识
  • 【设计模式学习笔记】1. 设计模式概述
  • 系统设计及解决方案
  • EndtoEnd Object Detection with Transformers
  • BOOST 库在缺陷检测领域的应用与发展前景
  • 1、redis的基础知识和类型
  • Docker部署neo4j
  • JDBC(Tomcat)
  • 深入探索哈夫曼编码与二叉树的遍历
  • 三、STM32MP257系列之定制Yocto Machine
  • 《PHP MySQL 插入数据》
  • Pytorch | 利用VA-I-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击
  • SD ComfyUI工作流 对人物图像进行抠图并替换背景
  • numpy的repeat和pytorch的repeat区别
  • CSS实现一个自定义的滚动条
  • 虚幻引擎反射机制
  • LabVIEW故障诊断中的无故障数据怎么办