詳細了解如何在npm上發布自己的包？-有解無憂

大家好，我是紙飛機，想必大家都在專案中經常會使用npm install、yarn add、cnpm install等安裝包的命令吧，那么大家好奇過，這些包都是怎么來的嗎？不用迷茫，本篇文章就為你揭秘他們到底怎么來的并且手把手教你做一個屬于你自己的一個可以npm安裝的組件庫，

🔥無論是npm、yarn還是cnpm他們都有一個統一的名字：JavaScript包管理工具，顧名思義都是用來管理包的，用戶將包發在線上隨時可用，并且cnpm和npm本就是同宗同源，他們的命令都大致相同，只是cnpm對國內有好些，yarn雖然不同，但無非就是多了個快取離線下載，下面放出三個大哥的官網，大家可以去了解，這次的主題是npm包的上傳，

npm：npm
cnpm：http://npm.taobao.org/
yarn：Yarn 中文檔案

🔥一、創建包

git init my_npm_comp
cd my_npm_comp
npm init -y

創建出這么個玩意，操作中初始化了一個git倉庫，一個npm倉庫（建立package.json依賴包檔案），

🔥二、撰寫組件庫

這里要注意了，我們是要做一個組件庫，而不是一個組件，所以我們需要盡量模塊化，

我們在package.json同級下建立一個components檔案夾， 然后里面建立的一個個檔案的就是你的組件，例如我要來做個Alert組件和Toast組件，

首先components下建立Alert.js和Toast.js，

組件目錄

??1、Alert組件制作

這是個濫竽充數的組件，勿怪勿怪，為了湊個庫，也好講解，

components下的Alert.js：

let Alert = {
    show:function(){
        alert('紙飛機666')
    }
}


export default Alert;

??2、Toast組件制作

components下的Toast.js：

let Toast = {
  // 隱藏的 setTimeOut 參考
  hideTimeOut: null,
  /**
   * 初始化
   */
  init: function () {
    var toastNode = document.createElement("section");
    toastNode.innerHTML =
      '<i class="iconfont icon-success"></i><i class="iconfont icon-error"></i><span class="text">111</span>';
    toastNode.id = "toastWaka"; // 設定id，一個頁面有且僅有一個Toast
    toastNode.setAttribute("class", "toast"); // 設定類名
    toastNode.style.display = "none"; // 設定隱藏
    document.body.appendChild(toastNode);
  },
  /**
   * 顯示Toast
   * @param text 文本內容
   * @param type 型別 success error
   * @param duration 持續時間
   */
  show: function (text, type, duration) {
    // 確保上一次的 TimeOut 已被清空
    if (this.hideTimeOut) {
      clearTimeout(this.hideTimeOut);
      this.hideTimeOut = null;
      // console.error('上一次的 TimeOut 還未走完!');
      // return;
    }
    if (!text) {
      console.error("text 不能為空!");
      return;
    }
    var domToastWaka = document.getElementById("toastWaka");
    console.log("domToastWaka", domToastWaka);
    if (!domToastWaka) {
      console.error("toastWaka DOM 不存在!");
      return;
    }
    var domIconSuccess = domToastWaka.querySelector(".icon-success"); // 成功圖示
    var domIconError = domToastWaka.querySelector(".icon-error"); // 錯誤圖示
    var domToastText = domToastWaka.querySelector(".text"); // 文字
    domToastText.innerHTML = text || "";
    switch (type) {
      case "success":
        domIconSuccess.style.display = "inline";
        domIconError.style.display = "none";
        break;
      case "error":
        domIconSuccess.style.display = "none";
        domIconError.style.display = "inline";
        break;
      default:
        domIconSuccess.style.display = "none";
        domIconError.style.display = "none";
        break;
    }
    domToastWaka.style.display = "block";
    // 不傳的話默認2s
    var that = this;
    this.hideTimeOut = setTimeout(function () {
      domToastWaka.style.display = "none";
      that.hideTimeOut = null; // 置 TimeOut 參考為空
    }, duration || 2000);
  },
  /**
   * 隱藏 Toast
   */
  hide: function () {
    // 如果 TimeOut 存在
    if (this.hideTimeOut) {
      // 清空 TimeOut 參考
      clearTimeout(this.hideTimeOut);
      this.hideTimeOut = null;
    }
    var domToastWaka = document.getElementById("toastWaka");
    if (domToastWaka) {
      domToastWaka.style.display = "none";
    }
  },
};

Toast.init();

export default Toast;

??3、css樣式和庫匯出出口

目錄結構

my_npm_comp下建立style.css放css樣式，index.js是整個組件庫的出口，便于后面install后匯入組件，

style.css

/*toast樣式*/
#toastWaka {
    position: absolute;
    display: none;
    left: 50%;
    bottom: 50%;
    z-index: 99999;
    margin: 0 auto;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    width: 120px;
    height:40px;
    line-height: 40px;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    background-color: rgba(000,000,000,0.5);
}
 
#toastWaka .text{
    color: #fff;
    display: inline-block;
    font-size: 14px;
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
}

注意index.js非常重要，畢竟一定要有匯出，你才能匯入，這里涉及到一些前端模塊化的知識，后面會補充，有興趣的小伙伴也可以自行去查看，

index.js

import Toast from './components/Toast'
import Alert from './components/Alert'


let myLibs = {}

myLibs.Alert = Alert
myLibs.Toast = Toast

export default myLibs

🔥三、上傳組件庫

??1、先將npm源切換到npm

npm config set registry=http://registry.npmjs.org

??2、注冊npm賬號

已有賬號可跳過，

首先去npmjs官網注冊賬號，一定要郵箱驗證，

官網地址：npm

郵箱驗證 ?

當然也可以使用npm命令注冊：看下面

bash終端注冊賬號：

npm adduser

注冊npm賬號

按上圖提示輸入賬號密碼，Tip：輸密碼時字符不會顯示出來，并且去郵箱驗證賬號，不驗證push不了包，

郵箱驗證

??3、登陸賬號

已登錄賬號可跳過，（使用npm whoami這條命令查看）

用命令創建賬號會自動登錄，官網手動創建的可如下操作：

npm login

我這邊用huqinggui這個賬號來演示，

??4、發布(推送)包

npm publish

包發布成功

從終端來看包是發布成功了，我們打開我們的npmjs來看，包是否存在，

驗證包是否發布
哈哈，這不就是我們發布的包嗎？？

Tip：如果推送不成功，說明可能存在同名的包，請改下package.json里的name再發布，具體的命令以及錯誤處理地址：??npm常用命令以及npm publish常見問題處理方法??_紙飛機博客-CSDN博客

修改了包后再publish報錯就需要修改package.json中的version，相當于發布一個新的版本，例如第一次提交的1.0.0 => 1.0.1 ，第二次便可以發布了，

🔥四、使用組件庫

??1、npm install 組件庫

npm i my_npm_comp

包安裝

包已經安裝成功我們接下來引入，

??2、使用組件庫

我們以vue為例，注意由于我們用的是原生js做的組件庫，故可用在任何場景，當然你如果用vue或者react寫的也是可以作為組件庫的，

App.vue

<template>
  <div id="app">
      <button @click="openAlert()">打開Alert</button>
      <button @click="openToast()">打開Toast</button>
  </div>
</template>

<script> 
import myLibs from 'my_npm_comp'
import 'my_npm_comp/style.css'
export default {
  name: "App",
  components: {},
  data() {
    return {
      
    };
  },
  methods: {
    openAlert(){
      myLibs.Alert.show();
    },
    openToast(){
      myLibs.Toast.show("我是toast!", "success", 3000);
    }
  },
};
</script>

我們來演示演示：

使用非常完美，就這樣一個完整的組件庫完美制作成功了，組件庫不僅限于使用原生js來制作哦！小伙伴們可以自己動手嘗試一遍哦，也可以自己做一套把常用的方法上傳上去，隨取隨用，很舒服的，

🔥熱門推薦🔥

微信支付成功不回呼怎么半？

package.json奧秘一覽！

宏任務和微任務的執行居然這么神奇！

前端開發居然可以提高這么大的效率！

npm常用命令大全！

前端異步我到底該怎么去解決？哪些玩意是異步啊！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/340772.html

標籤：其他

上一篇：作用域和作用域鏈

下一篇：Vue：第一個vue-cli專案