天天看点

开发一个属于自己的npm包一、初始化包二、发布自己的npm包总结

今天跟大家分享一下怎么开发一个简单的属于自己的npm包

文章目录

  • 一、初始化包
        • 1.新建 vwen 文件夹,作为包的根目录
        • 2.在 vwen 文件夹中,新建如下三个文件和src文件夹:
  • 二、发布自己的npm包
    • 1.注册npm账号
    • 2.登录 npm 账号
    • 3.发布包
  • 总结

一、初始化包

1.新建 vwen 文件夹,作为包的根目录

2.在 vwen 文件夹中,新建如下三个文件和src文件夹:

  1. package.json (包管理配置文件)
{
    "name": "vwen",
    "version": "1.0.0",
    "main": "index.js",
    "description": "提供格式化时间、HTMLEscape相关功能",
    "keywords": ["vwen", "dataFormat", "escape"],
    "license": "ISC"
}
           

其中name属性是包的名称,可以先去包网站看一下会不会重复,version是版本号,默认的初始版本号是1.0.0,main是包的入口文件,其实就是外界使用require来导入包的时候,导入的就是main属性指向的这个文件,description是包的简短的描述信息,keywords是搜索的关键字,license是包所遵循的开源许可协议,npm默认希望遵循ISC开源许可协议。

  1. index.js (包的入口文件)
// 这是包的入口文件
// 到时候导入就是导入这个包
// 向外暴露需要使用的成员,在外部就可以使用
const date = require('./src/dateFormat');
const escape = require('./src/htmlEscape');
module.exports = {
    // 把对象展开,展开运算符
    ...date,
    ...escape
}
           
  1. src(将不同的功能进行模块化拆分)
    开发一个属于自己的npm包一、初始化包二、发布自己的npm包总结

dateFormat.js

// 定义格式化时间的方法
function dateFormat(datastr) {
    // 实例化一个Date对象把时间当参数传进来
    const dt = new Date(datastr);
    // 获取年月日时分秒
    const y = dt.getFullYear();
    // 因为获取的月是从0开始的
    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) {
    // 如果是大于9就是两位数返回n,小于9就是个位数返回前面加0
    return n > 9 ? n : '0' + n;
}
module.exports = {
    dateFormat
}
           

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(str) {
    return str.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. README.md (包的说明文档)
    开发一个属于自己的npm包一、初始化包二、发布自己的npm包总结
    开发一个属于自己的npm包一、初始化包二、发布自己的npm包总结
  2. 最终项目结构
    开发一个属于自己的npm包一、初始化包二、发布自己的npm包总结

二、发布自己的npm包

1.注册npm账号

开发一个属于自己的npm包一、初始化包二、发布自己的npm包总结
开发一个属于自己的npm包一、初始化包二、发布自己的npm包总结

2.登录 npm 账号

开发一个属于自己的npm包一、初始化包二、发布自己的npm包总结

用电脑的网好像有点卡顿?一直报错,用手机开热点居然好了,看来是网络问题,也可能是邮箱验证的问题试了好久

开发一个属于自己的npm包一、初始化包二、发布自己的npm包总结
开发一个属于自己的npm包一、初始化包二、发布自己的npm包总结

然后就是相关信息的填写

开发一个属于自己的npm包一、初始化包二、发布自己的npm包总结

3.发布包

发布之前先去查一查自己的包会不会重复名称不能跟别人的重复

开发一个属于自己的npm包一、初始化包二、发布自己的npm包总结

将终端切换到包的根目录之后,运行 npm publish 命令,即可将包发布到 npm 上

开发一个属于自己的npm包一、初始化包二、发布自己的npm包总结

发布成功后可以在官网查看到

开发一个属于自己的npm包一、初始化包二、发布自己的npm包总结

总结

过程中npm login和npm publish总是出错,多半是网络问题导致的。

继续阅读