5.npm包

🕗 发布于 2024-12-28 22:47 npm 前端 node.js

文章目录

@[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文件，再对外暴露，供外部使用就可以了