一、需要实现的功能
- 日期格式化
- html转译
- html转译后再还原
// 1，导入自己的包
const ywbTools= require('ywb-tools')
// ------- 功能1: 格式化日期------
const dt = ywbTools.dateFormat(new Date())
// 输出 2020-01-20 10:09:45
console.log(dt)
// ------- 功能2: 转义 HTML 中的特殊字符-----
const htmlStr = '<h1 style="color: red;">你好! ©<span>小黄! </span></h1>'
const str = ywbTools.htmlEscape(htmlstr)
console.log(str)
// <h1 style="color: red;">你子! &copy;<span>小黄! </span></h1>
---- 功能3: 还原 HTML 中的特殊字符---
const rawHTML = ywbTools.htmlUnEscape(str)
// 输出 <h1 style="color: red;">你好! ©<span>小黄! </span></h1>
console.log(rawHTML)
二、初始化包的基本机构
2.1、初始化目录结构
- 新建ywb-tools 文件夹，作为包的根目录
- 在ywb-tools文件夹中，新建如下三个文件
- package.json (包管理配置文件)
- index.js (包的入口文件)
-
README.md (包的说明文档)
image.png
2.2、初始化 packagejson
{
"name": "ywb-tools",
"version": "1.0.1",
"main": "index.js",
"description": "提供了格式化时间、HTMLEscape相关功能",
"keywords": [
"ywb",
"dateFormate",
"escape"
],
"license": "ISC"
}
name包名
version版本号
main入口文件
description描述
keywords搜索关键词
license开源许可协议
三、在index.js定义格式化时间的函数
/* 格式化工具 */
function dateFormate(dateStr) {
const dt = new Date(dateStr);
const y = dt.getFullYear();
const m = pdZero(dt.getMonth() + 1);
const d = pdZero(dt.getDate());
const hh = pdZero(dt.getHours());
const mm = pdZero(dt.getMinutes());
const ss = pdZero(dt.getSeconds());
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
/* 补零工具 */
function pdZero(n) {
return n > 9 ? n : "0" + n;
}
/* 向外暴露成员 */
module.exports = {
dateFormate,
};
dateFormate使用
/* 引入方式一 */
const ywbTools = require("../ywb-tools/index");
/* 引入方式二---
1.寻找ywb-tools文件夹下面的package.json
2.寻找package.json的main属性
3.加载main属性的地址 */
const ywbTools = require("../ywb-tools");
// 格式化时间功能
const dtStr = ywbTools.dateFormate(new Date()); //2023-09-10 11:34:16
console.log(dtStr);
四、在indexjs 中定义转义 HTML的方法
/* 定义转译HTML的字符的函数 */
function htmlEscape(htmlStr) {
return htmlStr.replace(/<|>|"|&/g, (match) => {
switch (match) {
case "<":
return "<";
case ">":
return ">";
case '"':
return """;
case "&":
return "&";
}
});
}
/* 暴露 */
module.exports = {
dateFormate,
htmlEscape,
};
htmlEscape使用
/* 引入方式一 */
// const ywbTools = require("../ywb-tools/index");
/* 引入方式二---
1.寻找ywb-tools文件夹下面的package.json
2.寻找package.json的main属性
3.加载main属性的地址 */
const ywbTools = require("../ywb-tools");
const htmlStr = '<h1 title="abc">这是h1标签<span>123 </span></h1>';
const str = ywbTools.htmlEscape(htmlStr);
// <h1 title="abc">这是h1标签<span>123&nbsp;</span></h1>
console.log(str);
五、在indexjs 中定义HTML还原
/* 定义HTML还原的函数 */
function htmlUnEscape(htmlStr) {
return htmlStr.replace(/<|>|"|&/g, (match) => {
switch (match) {
case "<":
return "<";
case ">":
return ">";
case """:
return '"';
case "&":
return "&";
}
});
}
/* 暴露 */
module.exports = {
dateFormate,
htmlEscape,
htmlUnEscape,
};
htmlUnEscape使用
/* 引入方式一 */
// const ywbTools = require("../ywb-tools/index");
/* 引入方式二---
1.寻找ywb-tools文件夹下面的package.json
2.寻找package.json的main属性
3.加载main属性的地址 */
const ywbTools = require("../ywb-tools");
const str =
"<h1 title="abc">这是h1标签<span>123&nbsp;</span></h1>";
const htmlStr= ywbTools.htmlUnEscape(str);
console.log(htmlStr);
// <h1 title="abc">这是h1标签<span>123 </span></h1>
六、将不同的功能进行模块化拆分
- 将格式化时间的功能，拆分到 src -> dateFormat.js 中
- 将处理 HTML 字符串的功能，拆分到 src -> htmlEscape.js 中在indexjs 中，*
- 导入两个模块，得到需要向外共享的方法在indexjs 中，
- 使用module.exports 把对应的方法共享出去
image.png
6.1、dateFormat.js
/* 格式化工具 */
function dateFormate(dateStr) {
const dt = new Date(dateStr);
const y = dt.getFullYear();
const m = pdZero(dt.getMonth() + 1);
const d = pdZero(dt.getDate());
const hh = pdZero(dt.getHours());
const mm = pdZero(dt.getMinutes());
const ss = pdZero(dt.getSeconds());
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
/* 补零工具 */
function pdZero(n) {
return n > 9 ? n : "0" + n;
}
module.exports = {
dateFormate,
};
6.2、htmlEscape.js
/* 定义转译HTML的字符的函数 */
function htmlEscape(htmlStr) {
return htmlStr.replace(/<|>|"|&/g, (match) => {
switch (match) {
case "<":
return "<";
case ">":
return ">";
case '"':
return """;
case "&":
return "&";
}
});
}
/* 定义HTML还原的函数 */
function htmlUnEscape(htmlStr) {
return htmlStr.replace(/<|>|"|&/g, (match) => {
switch (match) {
case "<":
return "<";
case ">":
return ">";
case """:
return '"';
case "&":
return "&";
}
});
}
/* 暴露 */
module.exports = {
htmlEscape,
htmlUnEscape,
};
6.3、index.js
// 包的入口文件
const date = require("./src/dateFormat");
const escape = require("./src/htmlEscape");
/* 暴露 */
module.exports = {
...date,
...escape,
};
七、README.md维护
image.png
image.png
八、包发布
8.1、注册npm账号
- 访问 https://www.npmjs.com/ 网站，
- 点击 sign up 按钮，进入注册用户界面 填写账号相关的信息: Full Name、Public Email、Username（不能是纯数字）、 Password
- 点击 Create an Account 按钮，注册账号
- 登录邮箱，点击验证链接，进行账号的验证
image.png
查看邮箱发送的文件（拿到code码填入）
image.png
登录成功
image.png
8.2、登录npm账号
npm 账号注册完成后，可以在终端中执行 npm login 命令，依次输入用户名、密码、邮箱后，即可登录成功
注意:在运行npm login 命令之前，必须先把下包的服务器地址切换为 npm 的官方服务器。否则会**导致发布包失败 **
8.2.1、切换为 npm 的官方服务器
image.png
8.2.2、登录
image.png
8.3、发布包
找到自己的开发包的根目录运行npm publish
image.png
8.4、安装包并使用
image.png
可以看到已经安装好了
image.png
可以看到已经正确安装并使用
image.png
网友评论