在NPM釋出自己造的輪子

Lemoncool發表於2020-07-29
NPM

提到封裝元件，釋出到npm，很多同學都會覺得很神祕。但其實，npm包無非就是我們平時寫的比較獨立且可複用的模組。當然，想要釋出，除了基礎元件的編寫外，還要進行一些包裝。下文通過一個簡單的案例，和大家一起討論元件從開發到釋出的整個過程。在此承諾，包教包會！

一、封裝元件

封裝元件包共有3個步驟：

  • 建立元件模板
  • 自定義元件內容
  • 安裝依賴，打包元件
1、建立元件模板

命令：vue init webpack-simple proName，這裡我定義專案名叫“hello-world”。

由於是simple版本，所以語句沒有那麼多。此時，會生成一個預設的模板，結構如下：

2、自定義元件內容
2.1調整src資料夾，配置入口檔案

將src資料夾內的檔案全部刪掉，新建lib資料夾放元件相關內容。例如：我們新建一個index.vue，負責元件內容的編寫。新建一個index.js，負責匯出元件，即元件入口檔案。

// index.vue 
<template>
    <div style="background-color: bisque;">
       <h1>我是父元件傳入的文字：{{message}}</h1>
        <input v-on:input="sendMsg">
     </div>
</template>
<script>
    export default {
         name: 'helloWorld',   
         props: {  
             message: {
                type: String,
                default: () => 'hello world' 
             } 
         }, 
         methods: {
            sendMsg(e) {
               this.$emit('msgFromSon', e.target.value); 
            }
        }
 }; 
</script>                            
// index.js 
import helloWorld from './index.vue'; 
helloWorld.install = function(Vue) {  
     Vue.component(helloWorld.name, helloWorld); 
}; 
export default helloWorld;
2.2 修改package.json檔案
  • 在原有依賴檔案基礎上，向其中新增元件需要的依賴。此時示例元件非常簡單，不需要新增額外依賴，略過此步。
  • 配置main屬性，指向dist檔案下的js檔案

不配置main屬性的話，元件上傳到npm，在專案中下安裝引用後，會提示沒有安裝：提示資訊下圖:

估計有同學好奇藍色圈起部分程式碼是做什麼，這是可選項，不必須配置。配置後，會顯示在npm包的右側資訊中，比如下圖這樣：

2.3 修改webpack.config
  • 配置 entry 屬性，即構建時的入口。例如：此時元件入口是lib下的index.js。
  • 配置 library 和 libraryTarget 屬性：

不配置library和libraryTarget的話，打包、釋出、安裝到專案，全程不會報錯。只是引入元件後，頁面不顯示元件，審查元素會發現，元件位置顯示的是一個串編譯後的程式碼：<!--function(t,n,r,o){return cn(e,t,n,r,o,!0)}-->

3、安裝依賴並打包元件
3.1 安裝依賴：npm  i

3.2 打包元件：npm run build

看到下圖資訊，說明打包成功。

3.3 打包時可能會遇到的問題

打包入口不對。回到2.1.3，配置webpack的entry屬性。修改完重新打包。

根據提示訊息可以知道，是元件中用到了sass-loader，但專案中沒有，也就是被略過的步驟2.1.2。元件的依賴不一樣，有可能報錯依賴名不是這個，各位小可愛舉一反三。根據提示訊息可以知道，是元件中用到了sass-loader，但專案中沒有，也就是,被略過的2.1.2。

解決辦法：在package.json中加入該依賴，重新執行npm i，再npm run build即可。

寫到現在，元件已基本完成。接下來就是釋出。如果擔心元件有bug，可以先本地測試一下。詳情看下一步【本地模擬釋出】。如果元件基本沒問題，可直接釋出。那請跳過下一節，直接看第三節【釋出元件到npm】。

二．本地模擬釋出

打包完成後，繼續在元件原始碼根目錄下，執行命令：npm pack

命令執行後，會在根目錄下生成一下.tgz包，然後在需要引入元件的專案中執行以下命令：npm install 本地包路徑，本地包路徑為剛才生成的.tgz包路徑，注意命令中斜槓方向！！！

舉個例子，我的示例元件在D盤根目錄下，所以我要執行的命令就是：npm install D:/hello-world/hello-world-1.0.0.tgz

安裝後，package中會出現一條依賴，但本條記錄會顯示檔案路徑，因為是本地模擬安裝的。不重要，直接測試功能就好。

三、釋出元件到npm

3.1 註冊npm賬號

在npm官網註冊賬號，地址：https://www.npmjs.com/signup，填寫相關資訊後，點選最下方的“Create an Account‘’按鈕。

注意：

  1. 使用者名稱(Uearname)註冊後不可修改，慎重填寫。其他項可在個人資料中修改。
  2. 郵箱要進行驗證，會傳送驗證連結到註冊郵箱，沒有驗證的話不能釋出元件包。
3.2 登入、釋出

切換到需要發包的專案根目錄下，登入npm賬號，輸入使用者名稱、密碼、郵箱

登入：npm login

釋出：npm publish

3.3 釋出時可能遇到的問題

package檔案中設定了private：true。將private設定為false，或移除private屬性即可。

看來“hello-world”包名被佔用了。所以最好在官網查一下是否已存在該包名，然後修改package.json中的name值重新發布。

每次釋出到npm上需要更改版本號，即package.json 裡的 version 欄位不可與已釋出的包版本號相同。

四．元件安裝及使用

1 、首先確認元件釋出情況：有兩種方式

  • 無需登入，直接在npm中搜包名，可以搜到即釋出成功
  • 登入npm官網，點選個人頭像下“packages”選項。可以看到包，說明發布成功。

2、如果釋出成功，即可在專案中直接使用元件：

命令：npm install 元件名稱，這裡我執行 npm i lemoncool-test。安裝完成，在頁面中應用該元件：

<template>
   <div id="app">
        <lemoncoolTest :message="msg" @msgFromSon="receiveMsg">
        </lemoncoolTest>
   </div>
</template>
<script>
    import lemoncoolTest from 'lemoncool-test';  
    export default { 
         name: 'app',
         components: { lemoncoolTest }, 
         data() { 
            return {  
               msg: 'Welcome to Your Vue.js App'  
            }             
         }, 
         methods: {   
           receiveMsg(val) { 
                 console.log(val); 
             }                
        } 
 } 
</script>

啟動後，頁面效果如下，說明元件封裝和安裝都成功

五．元件刪除

npm不鼓勵任何形式的刪除，主要因為我們釋出的包可能已經被其他人引用，如果我們刪除，會對使用者造成很大困擾。

基於此，npm做了相關的刪除限制：

   刪除的版本24小時後方可重發!

   只有釋出72小時之內的包可以刪除!

如果一定需要刪除，執行命令：npm unpublish 包名 --force，要加--force。

由於我剛剛上傳的包只是為了測試，沒什麼價值，就不要佔空間了，所以執行命令：npm unpublish lemoncool-test --force

此時去npm官網搜包名，或者去自己名下看。package已經不見了。說明刪除成功。同時，已刪除的包無法再進行安裝。

到此為止，元件的封裝配置、打包、測試、釋出，甚至刪除，我們就討論完了。文章中示例元件有很多需要改進的地方，大家參考相關配置就好。原始碼沒有上傳，如果有需要，可以留言板call我。

一個人能力當中所蘊藏的潛能，遠超過自己想象以外。奧利給~

相關文章