美文网首页
前端(5)开发插件并发布私有npm仓库

前端(5)开发插件并发布私有npm仓库

作者: 仙人掌开不了花 | 来源:发表于2020-04-17 17:27 被阅读0次

一 构建插件依赖文件夹

  1. 项目文件夹 time-formater-select
  2. 在项目文件夹下初始化
npm init
  1. 创建 index.js 文件,作为依赖的入口文件
  2. 创建 timerformater.js 作为功能实现文件

二 index.js 文件

module.exports = require('./timeformater');

三 timerformater.js文件,实现功能

// 开启严格模式,规范代码,提高浏览器运行效率
"use strict"
// 定义一个存放返回时间类型的数组
var timeType = [
    {
        type: 1,
        description: 'YYYY-MM-DD'
    }, {
        type: 2,
        description: 'YYYY/MM/DD'
    }, {
        type: 3,
        description: 'YYYY-MM-DD hh:mm:ss'
    }, {
        type: 4,
        description: 'YYYY-MM-DD hh-mm-ss'
    }, {
        type: 5,
        description: 'YYYY/MM/DD hh:mm:ss'
    }, {
        type: 6,
        description: 'YYYY/MM/DD hh-mm-ss'
    }
]
//定义一个类,通常首字母大写
var TimeFormater = function (input, type) {
    var that = this || TimeFormater
    // 默认返回的时间类型是YYYY-MM-DD hh-mm-ss
    that.dateType = 3
    timeType.forEach(function (item) {
        if (item.description === type) {
            that.dateType = item.type
        }
    })
    if (typeof input === 'string') {
        that.timeNumber = parseInt(input)
    } else if (typeof input === 'number') {
        that.timeNumber = parseInt(input)
    } else {
        that.timeNumber = (new Date()).getTime()
    }
    TimeFormater.fn.timeNumber = that.timeNumber
    TimeFormater.fn.dateType = that.dateType
    return TimeFormater.fn.init()
}

// 覆写原型链,给继承者提供方法
TimeFormater.fn = TimeFormater.prototype = {
    constructor: TimeFormater,
    init: function () {
        if (this.dateType === 1) {
            return this.YYYY() + '-' + this.MM() + '-' + this.DD()
        } else if (this.dateType === 2) {
            return this.YYYY() + '/' + this.MM() + '/' + this.DD()
        } else if (this.dateType === 3) {
            return this.YYYY() + '-' + this.MM() + '-' + this.DD() + ' ' + this.hh() + ':' + this.mm() + ':' + this.ss()
        } else if (this.dateType === 4) {
            return this.YYYY() + '-' + this.MM() + '-' + this.DD() + ' ' + this.hh() + '-' + this.mm() + '-' + this.ss()
        } else if (this.dateType === 5) {
            return this.YYYY() + '/' + this.MM() + '/' + this.DD() + ' ' + this.hh() + ':' + this.mm() + ':' + this.ss()
        } else if (this.dateType === 6) {
            return this.YYYY() + '/' + this.MM() + '/' + this.DD() + ' ' + this.hh() + '-' + this.mm() + '-' + this.ss()
        } else {
            return this.YYYY() + '-' + this.MM() + '-' + this.DD() + ' ' + this.hh() + ':' + this.mm() + ':' + this.ss()
        }
    },
    YYYY: function () {
        var that = this
        that.year = (new Date(that.timeNumber)).getFullYear()
        return that.year
    },
    MM: function () {
        var that = this
        that.month = ((new Date(that.timeNumber)).getMonth() + 1) < 10 ? ('0' + ((new Date(that.timeNumber)).getMonth() + 1)) : ((new Date(that.timeNumber)).getMonth() + 1)
        return that.month
    },
    DD: function () {
        var that = this
        that.day = (new Date(that.timeNumber)).getDate() < 10 ? ('0' + (new Date(that.timeNumber)).getDate()) : (new Date(that.timeNumber)).getDate()
        return that.day
    },
    hh: function () {
        var that = this
        that.hours = (new Date(that.timeNumber)).getHours() < 10 ? ('0' + (new Date(that.timeNumber)).getHours()) : (new Date(that.timeNumber)).getHours()
        return that.hours
    },
    mm: function () {
        var that = this
        that.minutes = (new Date(that.timeNumber)).getMinutes() < 10 ? ('0' + (new Date(that.timeNumber)).getMinutes()) : (new Date(that.timeNumber)).getMinutes()
        return that.minutes
    },
    ss: function () {
        var that = this
        that.seconds = (new Date(that.timeNumber)).getSeconds() < 10 ? ('0' + (new Date(that.timeNumber)).getSeconds()) : (new Date(that.timeNumber)).getSeconds()
        return that.seconds
    }
}

// 兼容CommonJs规范
if (typeof module !== 'undefined' && module.exports) module.exports = TimeFormater
// 兼容AMD/CMD规范
if (typeof define === 'function') define(function () {
    return TimeFormater
})

TimeFormater.fn.init.prototype = TimeFormater.fn
module.exports = TimeFormater

四 上传到npm网站,作为可下载安装的依赖

npm login
npm publish

如果发布的时候遇到 please report this TypeError [ERR_INVALID_CALLBACK]: Callback must be a function 请更换node.js的版本,建议使用v8.15.1。原因就是node10的fs.write更新导致的。
可以使用gnvm进行node的多版本管理和切换,参考文章Node.js的多版本管理器

五 在Vue项目中使用

// 安装依赖
npm i time-formater-select
// main.js 中引入依赖
import timeformater from 'time-formater-select'
Vue.prototype.timeformater = timeformater
// 项目中使用
console.log(this.timeformater('1528094422381'))

六 npm依赖包的更新

修改package.json里面的version字段,然后

npm publish

七 删除包

npm unpublish 依赖包名称 --force

相关文章

网友评论

      本文标题:前端(5)开发插件并发布私有npm仓库

      本文链接:https://www.haomeiwen.com/subject/clalvhtx.html