0
点赞
收藏
分享

微信扫一扫

npm与包(开发属于自己的包)

你的益达233 2022-01-10 阅读 124

文章目录


初始化包的基本结构

  1. 新建demo-tools文件夹,作为包的目录
  2. 在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 '&lt;'
            case '>':
                return '&gt;'
            case '"':
                return '&quot;'
            case '&':
                return '&amp;'
        }
    })
}
// 向往暴露需要的成员
module.exports = {
    dateFormat,
    htmlEscape
}

四、在index.js中定义还原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 = {
    dateFormat,
    htmlEscape,
    htmlUnEscape
}

五、将不同的功能进行模块化拆分

在这里插入图片描述

  1. 将格式化时间的功能,拆分到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
}
  1. 将处理HTML字符串的功能,拆分到src -> 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
}
  1. 在index.js中,导入两个模块,得到需要向外共享的方法
  2. 在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账号

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

2、登录npm账号(终端)

npm账号注册完成之后,在终端中执行npm login命令,依次输入用户名、密码、邮箱后,即可登录成功
在这里插入图片描述

3、把包发布到npm上

将终端切换到包的根目录之后,运行npm publish命令,即可将包发布到npm上(注意:包名不能雷同
在这里插入图片描述

4、npm官网登录账号查看

在这里插入图片描述
在这里插入图片描述

4、删除已发布的包

运行 npm unpublish 包名 --force 命令,即可从npm删除已发布的包

举报

相关推荐

0 条评论