文章目录
- 初始化包的基本结构
- 一、初始化package.json
- 二、在index.js中定义格式化时间的方法
- 三、在index.js中定义转义HTML的方法
- 四、在index.js中定义还原HTML的方法
- 五、将不同的功能进行模块化拆分
- 六、编写包的说明文档
- 七、发布包
初始化包的基本结构
- 新建demo-tools文件夹,作为包的目录
- 在demo-tools文件夹中,新建如下三个文件
package.json (包管理配置文件)
index.js (包的入口文件)
README.md (包的说明文档)
一、初始化package.json
{
"name":"demo-tools",
"version":"1.0.0",
"main":"index.js",
"description":"提供了格式化时间,HTMLEscape的功能",
"keywords":["itheima","dateFormat","escape"],
"license":"ISC"
}
二、在index.js中定义格式化时间的方法
代码如下(示例):
// 格式化时间的方法
function dateFormat(dateStr){
const dt = new Date(dateStr)
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
}
引入使用
代码如下(示例):
//根据demo-tools目录下查找package.json中的mian属性导入index.js
const demoTools = require('./demo-tools')
const dtStr = demoTools.dateFormat(new Date())
console.log(dtStr);
三、在index.js中定义转义HTML的方法
// 定义转义HTML的方法
function htmlEscape(htmlStr) {
return htmlStr.replace(/<|>|"|&/g, (match) => {
switch (match) {
case '<':
return '<'
case '>':
return '>'
case '"':
return '"'
case '&':
return '&'
}
})
}
// 向往暴露需要的成员
module.exports = {
dateFormat,
htmlEscape
}
四、在index.js中定义还原HTML的方法
// 定义还原HTML的方法
function htmlUnEscape(htmlStr) {
return htmlStr.replace(/<|>|"|&/g, (match) => {
switch (match) {
case '<':
return '<'
case '>':
return '>'
case '"':
return '"'
case '&':
return '&'
}
})
}
// 向往暴露需要的成员
module.exports = {
dateFormat,
htmlEscape,
htmlUnEscape
}
五、将不同的功能进行模块化拆分
- 将格式化时间的功能,拆分到src -> dateFormat.js中
// 格式化时间的方法
function dateFormat(dateStr) {
const dt = new Date(dateStr)
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
}
- 将处理HTML字符串的功能,拆分到src -> 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
}
- 在index.js中,导入两个模块,得到需要向外共享的方法
- 在index.js中,使用module.exports把对应的方法共享出去
//这是包的入口文件
const date = require('./src/dateFormat')
const secape = require('./src/htmlEscape')
// 向往暴露需要的成员
module.exports = {
...date,
...secape
}
六、编写包的说明文档
包根目录中的README.md文件,是包的使用说明文档。通过它,我们可以事先把包的使用说明,以markdown的格式写出来,方便用户参考。
创建的包README.md文档中,会包含以下6项内容:
安装方式、导入方式、格式化时间、转义HTML中的特殊字符、还原HTML中特殊字符、开源协议
七、发布包
1、注册npm账号
- 访问https://www.npmjs.com/网站,点击sign up按钮,进入注册用户界面
- 填写账号相关的信息:Full Name、Public Email、Username、Password
- 点击Create an Account按钮,注册账号
- 登陆邮箱,点击验证链接,进行账号的验证
2、登录npm账号(终端)
npm账号注册完成之后,在终端中执行npm login命令,依次输入用户名、密码、邮箱后,即可登录成功
3、把包发布到npm上
将终端切换到包的根目录之后,运行npm publish命令,即可将包发布到npm上(注意:包名不能雷同)
4、npm官网登录账号查看
4、删除已发布的包
运行 npm unpublish 包名 --force 命令,即可从npm删除已发布的包