开发一个属于自己的包(自定义包)

8 篇文章 0 订阅
7 篇文章 0 订阅

1.需要实现的功能

(1)格式化日期
(2)转义HTML中的特殊字符
(3)还原HTML中的特殊字符

2.初始化包的基本结构

(1)新建supertool文件夹,作为包的根目录
(2)在supertool文件夹里面,新建如下的三个文件:

package.json 	(包管理配置文件)
index.js		(包的入口文件)
README.md 		(包的说明文档--官网上面也会以网页的形式展现出来的)

3.初始化package.json

名称功能
name在npm服务器上面的包名(这个名字和文件夹的名字是可以不一致的)
main包的入口
descriptionnpm官网上面查找的时候,搜素框下面提示框所显示的简介
keywords查找关键词
license所遵守的开源许可协议
{
	"name" : "supertool",
    "version": "1.0.0",
    "main" : "index.js",
    "description":“提供了格式化时间,HTMLEscape的功能",
   "keywords" :["itheima","dateFormat", "escape"],
   "license" : "ISC"
}

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

// 1.定义格式化时间的方法
function dataFormat(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;
}

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

//定义转义HTML标签的函数
function htmlEscape(htmlStr) {
    //里面需要定义一个全局匹配的匹配相应字符的正则表达式
    return htmlStr.replace(/<|>|"|&/g, (match) => {
        switch (match) {
            case '<':
                return '$lt';
            case '>':
                return '$gt';
            case '"':
                return '$qout';
            case '&':
                return '$amp';
        }
    })
}

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

//定义还原HTML字符串的函数
function htmlUnEscape(htmlStr) {
    return htmlStr.replace(/$lt;|$gt;|$qout;|$amp;/g, (match) => {
        switch (match) {
            case '$lt;':
                return '<';
            case '$gt;':
                return '>';
            case '$quot;':
                return '"';
            case '$amp;':
                return '&';
        }
    })
}

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

(1)将格式化时间的功能,拆分到src -> dateFormat.js 中
在这里插入图片描述

(2)将处理HTML字符串的功能,拆分到src -> htmlEscape.js 中
在这里插入图片描述

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

const data = require('./src/dataFormat');
const escape = require('./src/htmlEscape');

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

// 定义的函数默认都是私有的,所以我们下一步是将这些方法给共享出去
module.exports = {
    // ...是ES6中的展开运算符,就是将data对象里面的属性栏都展开,放在这里被该文件共享
    ...data,
    ...escape
}

8.编写包的说明文档

(1)包根目录中的README.md文件,是包的使用说明文档。通过它,我们可以事先把包的使用说明,以 markdown的格式写出来,方便用户参考。
(2)README文件中具体写什么内容,没有强制性的要求;只要能够清晰地把包的作用、用法、注意事项等描述清楚即呵。
(3)我们所创建的这个包的 README.md文档中,会包含以下6项内容:
安装方式、导入方式、格式化时间、转义HTML中的特殊字符、还原HTML中的特殊字符、开源协议

具体代码文件可点击 示例代码文件 进行下载

9. 发布包

9.1.注册npm账号
访问https://www.npmjs.com/网站,点击sign up按钮,进入注册用户界面
填写账号相关的信息:Full Name、Public Email、Username、Password
点击 Create an Account按钮,注册账号
登录邮箱,点击验证链接,进行账号的验证

9.2.登录npm账号
npm账号注册完成后,可以在终端中执行npm login 命令(并不是在网站中执行命令),依次输入用户名、密码、邮箱后,即可登录成功。
注意:在运行npm login命令之前,必须先把下包的服务器地址切换为npm的官方服务器。否则会导致发布包失败!(可以先使用nrm看一下)

9.3.把包发布到npm官方服务器上
将终端切换到包的根目录之后,运行npm publish 命令,即可将包发布到npm上
(注意:包名不能雷同——在咱们发布之前,最好是在npm官网上面查看一下有没有相似的包名)。

9.4.删除已发布的包
运行npm unpublish 包名 --force ,即可从npm删除已发布的包。
注意:
npm unpublish命令只能删除72小时以内发布的包
npm unpublish 删除的包,在24小时内不允许重复发布
发布包的时候要慎重,尽量不要往npm 上发布没有意义的包!

整理不易,给个赞再走呗!当然,也欢迎指正哈~

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

逍遥创江湖

你的鼓励将是我创作最大的动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值