细述怎么开发自己的插件依赖，并发布到npm上

写在文章前：一个在项目开发中通常遇到的需求，后台返回一个时间戳，前台需要处理成 xxxx年xx月xx日等格式的时间格式。通过我们会封装成一个函数进行调用，但在本文中，就小题大作一下，一个这样的需求怎么写成一个插件依赖呢？

a. this.timeformater('1528094422381') // 2018-06-04 14:40:22
b. this.timeformater('1528094422381','YYYY-MM-DD hh:mm:ss') // 2018-06-04 14:40:22
c. this.timeformater('1528094422381','YYYY-MM-DD hh-mm-ss') // 2018-06-04 14-40-22
d. this.timeformater('1528094422381','YYYY/MM/DD') // 2018/06/04
e. this.timeformater('1528094422381','YYYY/MM/DD hh:mm:ss') // 2018/06/04 14:40:22
f. this.timeformater('1528094422381','YYYY/MM/DD hh-mm-ss') // 2018/06/04 14-40-22

1）构建插件依赖文件夹

如博主：项目文件夹 time-formater-select
a. npm初始化一下： npm init
b. 创建index.js文件，作为依赖的入口文件
c. 创建timerformater.js作为功能实现文件

2）index.js文件（因为需求功能简单）

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

3）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
  // 默认返回的时间类型是 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;

4）上传到npm网站，作为可下载安装的依赖(或参考博主：npm网站发布自己的包)

npm login
npm publish

5）项目中使用，如博主是在vue项目开发

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

就这样，一个可安装下载的依赖就开发完成。博主所述的依赖源文件在github:
https://github.com/Path2017/plugin/tree/master/time-formater-select
此外也可以通过 npm i time-formater-select下载查看。

细述怎么开发自己的插件依赖，并发布到npm上

猜你喜欢