通過npm發布一個自己寫的簡單的npm包

前言：

學習了npm，想要自己動手操作一波，於是想着把常用的js代碼功能組裝成一個對象發布到npm上，以后有用的時候，通過npm安裝下來直接使用，這樣子就不用重發造輪子了。於是我想了想，發現自己做網站常用的代碼功能有表單驗證，所以決定把表單驗證的JS代碼封裝成一個對象，然后發布到npm上。

npm:

常用命令：

npm init --yes(初始化配置)

npm i (會根據package.json里面的鍵dependencies，devDependencies來安裝相對應的包)

npm i 包(默認安裝一個最新的包，這個包在node_modules文件夾里面，並且會更新在你的package.json文件)

npm i 包@3.0.0（安裝一個指定版本的包，會更新在你的package.json文件）

npm i 包 --save-dev(安裝一個開發環境所需要的包，會更新在你的package.json文件)

npm uninstall 包（卸載一個包，會更新在你的package.json文件）

npm update 包(更新此包版本為最新版本，會更新在你的package.json文件)

npm run 腳本鍵(會根據package.json里面的"scripts"里面的腳本鍵自動執行相對於的值)

npm publish  (根據package.json的name發布一個包)

npm unpublish 包名 --force(卸載npm網站上自己上傳的包)

 

配置文件說明：

  "name": "npm", //發布的包名，默認是上級文件夾名。不得與現在npm中的包名重復。包名不能有大寫字母/空格/下滑線!
  "version": "1.0.0",//你這個包的版本，默認是1.0.0。對於npm包的版本號有着一系列的規則，模塊的版本號采用X.Y.Z的格式，具體體現為：
  1、修復bug，小改動，增加z。
  2、增加新特性，可向后兼容，增加y
  3、有很大的改動，無法向下兼容,增加x
  "description": "",
  "main": "index.js",//入口文件，默認是Index.js，可以修改成自己的文件,這個很重要，當你在實際項目使用的時候，let a = require("包名")，它就去會去找對應的文件路徑哦。
  "scripts": {                  // 快捷命令，在package.json同目錄下輸入命令 npm run 鍵 就會執行 相對應的命令
    "bulid": "npx webpack --config myConfig.js"  //例如 輸入 npm run bulid 就會執行npx webpack --config myConfig.js的命令 。
  },
  "keywords": [],
  "author": "",
  "license": "ISC",//這個直接回車，開源文件協議吧，也可以是MIT，看需要吧。
  "dependencies": {             // 生產環境所依賴的包
    "jquery": "^3.4.1",
    "sea": "^1.0.2"
  },
  "devDependencies": {          // 開發環境所依賴的包
    "webpack": "^4.41.6"
  }
}

開始行動:發布一個hp-validate-form包

1.創建包

1.1創建文件夾hp-validate-form

1.2切換終端進入hp-validate-form文件夾 並輸入 npm init --yes(初始化配置)

1.3編寫JS文件

let validateForm = {
    /**
     * 描述：檢測郵箱格式是否正確
     * @parmas1 檢測所需文本
     * return bool
     */
    checkEmail(textValue = " ") {
        let result = false;
        let text = textValue.replace(/(^\s*)|(\s*$)/g, "");  // 去除左右空格
        let reg = /^([a-zA-Z]|[0-9]|_)+@([0-9]|[a-zA-Z])+.com$/; // 檢測大陸常見郵箱
        result = reg.test(text);
        return result;
    },
    /**
     * 描述：檢測密碼格式至少有length位以上，其中密碼必須包含一個數字、一個字母、一個特殊符號，不能有空格，中文字符。
     * @parmas1 檢測所需文本 @parmas2 設置密碼最短長度。
     * return bool
     */
    checkPassword(textValue = " ", length = 0) {
        let text = textValue.replace(/(^\s*)|(\s*$)/g, "");  // 去除左右空格 

        // 查看長度是否小於多少位
        if (text.length < length) return false;

        // 查看是否有數字
        let reg = /\d{1,}/g;
        if (reg.test(text) == false) return false;

        // 查看是否有字母
        reg = /[a-zA-Z]{1,}/g;
        if (reg.test(text) == false) return false;

        // 查看是否有空格
        reg = /\s/g;
        if (reg.test(text)) return false;

        // 查看是否有中文
        reg = /[\u4E00-\u9FA5\uF900-\uFA2D]/g;
        if (reg.test(text)) return false;

        // 查看是否有特俗符合
        reg = /[~!@#$%^&*()_+/-{}'"]{1,}/g;
        if (reg.test(text) == false) return false;

        return true;
    },
    /**
     * 描述：檢測用戶格式至少有length位以上，其中用戶名不能有空格，中文字符。
     * @parmas1 檢測所需文本 @parmas2 設置密碼最短長度。
     * return bool
     */
    checkUserName(textValue = " ", length = 0) {
        let text = textValue.replace(/(^\s*)|(\s*$)/g, "");  // 去除左右空格 

        // 查看長度是否小於多少位
        if (text.length < length) return false;

        // 查看是否有空格
        reg = /\s/g;
        if (reg.test(text)) return false;

        // 查看是否有中文
        reg = /[\u4E00-\u9FA5\uF900-\uFA2D]/g;
        if (reg.test(text)) return false;

        return true;
    }
};
module.exports =  validateForm;

 

1.4文件目錄結構

1.5修改package.json文件

{
  "name": "hp-validateform",
  "version": "1.0.0",
  "description": "常用的表單驗證",
  "main": "./dist/validateForm.js",
  "scripts": {
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
  }
}

 

2.發布包：

終端輸入：npm publish

 

 

3.下載包：

終端輸入：npm i hp-validate-form

 

 

使用:

let obj = require("hp-validate-form");
console.log(obj)

 

 

 發布成功以及使用成功。

4.后續維護

當你的包需要更新的時候，只需要修改里面的代碼，然后更改

"version": "1.0.0",

最后終端輸入

npm publish

就可以了。