vue js插件開發併發布到npm

一.假設我們創建一個輸入校驗規則的js插件

1.創建一個項目文件 validator
2.在validator目錄下cmd 執行npm init 生成 package.json文件,(可能重名了,就換個名字)

package.json

{
  "name": "validator",   //這個就是將來要引用的插件名
  "version": "1.0.0",
  "description": "simple input validator",
  "main": "index.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "y"
  },
  "keywords": [
    "robu",
    "validator",
    "validate"
  ],
  "author": "wyj",
  "license": "ISC"
}

3.在validator目錄下創建lib文件夾,在此目錄下開發插件
4.在lib文件夾中創建validator.js文件
validator.js

// 電話
let phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/

let FormValidate = (function () {
  function FormValidate () {}
  // From表單驗證規則  可用於公用的校驗部分
  FormValidate.Form = function () {
    return {
      // 電話號碼的驗證
      validatePhone (rule, value, callback) {
        if (!value) {
          return callback(new Error('請輸入手機號碼'))
        }
        if (!phoneReg.test(value)) {
          callback(new Error('手機格式不正確'))
        } else {
          callback()
        }
      },
    }
  }
  return FormValidate
}())

exports.FormValidate = FormValidate

5.在validator目錄下創建index.js文件
index.js

var  validator = require('./lib/validator.js');

module.exports = {
  FormValidate : validator.FormValidate
}

二.發佈到npm

1、首先得有npm賬號 去npm官網申請賬號;
2、在validator文件夾下 cmd 執行npm adduser,輸入用戶名、密碼、郵箱;
3、再在validator下cmd 執行npm publish發佈開發好的插件包。

三、使用

1、在自己的項目中添加依賴:npm i validator --save;
2、import validator from ‘validator’;
3、使用validator .FormValidate.Form().validatePhone;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章