开发并发布属于自己的npm包

2023-09-10 本文已影响0人扶得一人醉如苏沐晨

一、需要实现的功能

日期格式化
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;">你好! &copy;<span>小黄! </span></h1>'
const str = ywbTools.htmlEscape(htmlstr)
console.log(str)
// &lt;h1 style=&quot;color: red;&quot;&gt;你子! &amp;copy;&lt;span&gt;小黄! &lt;/span&gt;&lt;/h1&gt;
---- 功能3: 还原 HTML 中的特殊字符---
const rawHTML = ywbTools.htmlUnEscape(str)
// 输出 <h1 style="color: red;">你好! &copy;<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 "&lt;";
      case ">":
        return "&gt;";
      case '"':
        return "&quot;";
      case "&":
        return "&amp;";
    }
  });
}

/* 暴露 */
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&nbsp;</span></h1>';
const str = ywbTools.htmlEscape(htmlStr);
// &lt;h1 title=&quot;abc&quot;&gt;这是h1标签&lt;span&gt;123&amp;nbsp;&lt;/span&gt;&lt;/h1&gt;
console.log(str);

五、在indexjs 中定义HTML还原

/* 定义HTML还原的函数 */

function htmlUnEscape(htmlStr) {
  return htmlStr.replace(/&lt;|&gt;|&quot;|&amp;/g, (match) => {
    switch (match) {
      case "&lt;":
        return "<";
      case "&gt;":
        return ">";
      case "&quot;":
        return '"';
      case "&amp;":
        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 =
  "&lt;h1 title=&quot;abc&quot;&gt;这是h1标签&lt;span&gt;123&amp;nbsp;&lt;/span&gt;&lt;/h1&gt;";
const htmlStr= ywbTools.htmlUnEscape(str);
console.log(htmlStr);
// <h1 title="abc">这是h1标签<span>123&nbsp;</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 "&lt;";
      case ">":
        return "&gt;";
      case '"':
        return "&quot;";
      case "&":
        return "&amp;";
    }
  });
}

/* 定义HTML还原的函数 */

function htmlUnEscape(htmlStr) {
  return htmlStr.replace(/&lt;|&gt;|&quot;|&amp;/g, (match) => {
    switch (match) {
      case "&lt;":
        return "<";
      case "&gt;":
        return ">";
      case "&quot;":
        return '"';
      case "&amp;":
        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

八、包发布

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