开发自己的包
在这里需要给大家道个歉,由于小熊的粗心,前期没有对包进行查重,导致在npm
官网中与别人发布的包产生重名,以至于发布失败,于是小熊在后面将包的名称调整为了bear6
,在这里呼吁大家在创建自己的包之前一定要先去检索看是否重名,再次向大家道歉!!!
1、 需要实现的功能
(1)格式化日期
(2)转义 HTML 中的特殊字符
(3)还原 HTML 中的特殊字符
2、初始化包的基本结构
新建bear
文件夹,作为包的根目录,在 bear
文件夹中,新建如下三个文件:
(1)package.json (包管理配置文件)
(2)index.js (包的入口文件)
(3)README.md (包的说明文档)
3、初始化 package.json
如下:
{
"name": "bear",
"version": "1.0.0",
"main": "index.js",
"description": "提供了格式化时间,HTML Escape的功能",
"keywords": ["bear","dataFormat","escape"],
"license": "ISC"
}
4、在 index.js 中定义格式化时间的方法
//格式化时间的方法
function dateFormat(dataStr){
const dt = new Date(dataStr);
const y = padZero(dt.getFullYear())
const m = padZero(dt.getMonth()+1)
const d = padZero(dt.getDate())
const h = padZero(dt.getHours())
const mm = padZero(dt.getMinutes())
const ss = padZero(dt.getSeconds())
return `${y}-${m}-${d} ${h}:${mm}:${ss}`
}
//补0的方法
function padZero(n){
return n > 9 ? n : '0' + n;
}
module.exports = {
dateFormat
}
定义完成后,进行测试:创建一个test.js
的文件:
const test = require('./bear/index');
const t = test.dateFormat(new Date())
console.log(t)
测试结果为:
在这里我们可以发现,当我们导入我们需要的包的时候,require('./bear/index')
里面将我们自定义的包的入口文件名称也写上了,如果我们将其省略呢?
发现也可以成功输出,这是因为:node在通过require
导入文件的时候,发现并没有指定入口文件名称,就会去bear
目录中查找package.json
文件,在该文件中查找main
属性,会自动在require
中导入main
属性对应的属性值,即index.js
。
5、在 index.js 中定义转义 HTML 的方法
我们再在index.js
文件中定义转义HTML的方法,如下:
// 转义 HTML 的方法
function htmlEscape(htmlStr){
return htmlStr.replace(/<|>|"|&/g,(match)=>{
switch (match) {
case '<':
return '<'
case '>':
return '>'
case '"':
return '"'
case '&':
return '&'
}
})
}
//向外暴露需要的成员
module.exports = {
htmlEscape
}
定义完成后,在test.js
的文件中进行测试:
const htmlStr = '<h1>王欢你好啊<span> 好好学习哦</span></h1>'
const str = test.htmlEscape(htmlStr)
console.log(str)
运行结果为:
转换成功。
6、在 index.js 中定义还原 HTML 的方法
在定义一个还原 HTML 的方法,如下:
//还原HTML的方法
function htmlUnEscape(str){
return str.replace(/<|>|"|&/g,(match)=>{
switch (match) {
case '<':
return '<'
case '>':
return '>'
case '"':
return '"'
case '&':
return '&'
}
})
}
//向外暴露需要的成员
module.exports = {
htmlUnEscape
}
定义完成后,在test.js
的文件中进行测试:
const htmlStr = '<h1>王欢你好啊<span> 好好学习哦</span></h1>'
const str = test.htmlEscape(htmlStr)
const newStr = test.htmlUnEscape(str)
console.log(newStr)
运行结果为:
转换成功。
7、将不同的功能进行模块化拆分
前面我们一共定义了三种不同的功能,现在我们需要将他们进行模块化拆分。
(1)先在bear
目录下,创建一个src
文件夹,在该文件夹下创建两个js文件,将格式化时间的功能,拆分到 src
-> dateFormat.js
中;将处理 HTML 字符串的功能,拆分到 src
-> htmlEscape.js
中
(2)在将这两个js文件的函数分别在对应的文件中暴露出去:
dateFormat.js
:
//格式化时间的方法
function dateFormat(dataStr){
const dt = new Date(dataStr);
const y = padZero(dt.getFullYear())
const m = padZero(dt.getMonth()+1)
const d = padZero(dt.getDate())
const h = padZero(dt.getHours())
const mm = padZero(dt.getMinutes())
const ss = padZero(dt.getSeconds())
return `${y}-${m}-${d} ${h}:${mm}:${ss}`
}
//补0的方法
function padZero(n){
return n > 9 ? n : '0' + n;
}
module.exports = {
dateFormat
}
htmlEscape.js
:
// 转义 HTML 的方法
function htmlEscape(htmlStr){
return htmlStr.replace(/<|>|"|&/g,(match)=>{
switch (match) {
case '<':
return '<'
case '>':
return '>'
case '"':
return '"'
case '&':
return '&'
}
})
}
//还原HTML的方法
function htmlUnEscape(str){
return str.replace(/<|>|"|&/g,(match)=>{
switch (match) {
case '<':
return '<'
case '>':
return '>'
case '"':
return '"'
case '&':
return '&'
}
})
}
module.exports = {
htmlEscape,
htmlUnEscape
}
(3)两个文件封装好后,在 index.js
中,导入两个模块,得到需要向外共享的方法,并使用 module.exports
把对应的方法共享出去:
const format = require('./src/dateFormat')
const escape = require('./src/htmlEscape')
//向外暴露需要的成员
module.exports = {
...format,
...escape
}
模块化拆分已经完成,现在test.js
文件中进行测试,如下:
const test = require('./bear');
const t = test.dateFormat(new Date())
console.log(t)
console.log('----------------------------------')
const htmlStr = '<h1>王欢你好啊<span> 好好学习哦</span></h1>'
const str = test.htmlEscape(htmlStr)
console.log(str)
console.log('----------------------------------')
const newStr = test.htmlUnEscape(str)
console.log(newStr)
结果为:
8、编写包的说明文档
包根目录中的 README.md
文件,是包的使用说明文档。通过它,我们可以事先把包的使用说明,以 markdown 的格式写出来,方便用户参考。
README
文件中具体写什么内容,没有强制性的要求;只要能够清晰地把包的作用、用法、注意事项等描述清楚即可。
我们所创建的这个包的 README.md
文档中,会包含以下 6 项内容:
安装方式、导入方式、格式化时间、转义 HTML 中的特殊字符、还原 HTML 中的特殊字符、开源协议
如下:
## 安装
、、、
npm install bear
、、、
## 导入
、、、js
const bear = require('bear')
、、、
## 格式化时间
、、、js
//调用 dataFormat 对时间进行格式化
const dtStr = bear.dataFormat(new Date())
//结果 2022-01-05 15:21:27
console.log(dtStr)
、、、
## 转义 HTML 中的特殊字符
、、、js
//待转换的HTML字符串
const htmlStr = '<h1>王欢你好啊<span> 好好学习哦</span></h1>'
//调用htmlEscape方法进行转换
const str = test.htmlEscape(htmlStr)
//转换的结果 <h1>王欢你好啊<span>&nbsp;好好学习哦</span></h1>
console.log(str)
、、、
## 还原 HTML 中的特殊字符
、、、js
//待还原的HTML字符串
const newStr = test.htmlUnEscape(str)
//还原的结果 <h1>王欢你好啊<span> 好好学习哦</span></h1>
console.log(newStr)
、、、
## 开源协议
ISC
9、发布包
1、注册 npm 账号
(1)访问 https://www.npmjs.com/
网站,点击 sign up
按钮,进入注册用户界面
(2)填写账号相关的信息:Full Name
、Public Email
、Username
、Password
(3)点击 Create an Account
按钮,注册账号
(4)登录邮箱,点击验证链接,进行账号的验证
2、登录 npm 账号
npm 账号注册完成后,可以在终端中执行 npm login
命令,依次输入用户名、密码、邮箱后,即可登录成功。
注意:在运行 npm login
命令之前,必须先把下包的服务器地址切换为 npm 的官方服务器。否则会导致发布包失败!
3、把包发布到 npm 上
将终端切换到包的根目录之后,运行 npm publish
命令,即可将包发布到 npm 上(注意:包名不能雷同)
如下:
发布完成,再去npm登录账号查看是否发布成功:
点击packages
可以看到:
已经成功发布。
10、删除已发布的包
如果我们想要删除我们发布成功的包,可以运行 npm unpublish 包名 --force
命令,即可从 npm 删除已发布的包。
需要注意的是:
npm unpublish
命令只能删除 72 小时以内发布的包npm unpublish
删除的包,在 24 小时内不允许重复发布
比如我们现在删除刚创建的包:
再去npm
官网检查:
删除成功!