不會發布npm包？進來看看？

前言

npm(Node Package Manager)，一個Node的包管理器，平時我們常用的公共模塊（插件）或者叫做包大多都放在上面，所以接下來要封裝的插件，我們就簡單稱它爲npm包，本文從就從這個簡單的例子開始，逐步對它進行封裝-發佈-更新-擴展-使用，進而到得一個相對完整的npm包，下面開始。

一、一個最簡單的npm包

1.1 新建文件夾

可以找個地方直接建個文件夾，最好語義化一點，這樣以後也方便管理，我們這裏用終端建文件夾：

   mkdir toupper-case-project   // 這裏我們建了一個名爲toupper-case-project的文件夾

(對命令行還不太熟的小夥伴可以看看我這篇博客命令行不會？看這裏)

1.2 初始化項目

在項目根目錄下使用一下命令

   npm init

這時終端會提示你輸入諸如包名，版本號等信息，如下：

當然，你可以一路回車下來，或者你使用npm init -y就可以生成默認的package.json文件，效果都是一樣的，然後我們得到以下文件，簡單說明一下：

// package.json
{
  "name": "toupper-case-project",  // 包名稱，默認和你文件夾同名，可改，但是需要去npm官網搜素這個名稱是否已存在，因爲包名不能重複
  "version": "1.0.0",  // 項目默認版本號，可改，如果項目後期更新再發布，則需要修改版本號
  "description": "",   // 項目描述，選填，可利於SEO 
  "main": "index.js",  // 你的包的主要入口路徑，就是別人安裝了你的包後系統會去這個路徑找你的代碼
  "scripts": {         // 腳本命令，後面會講到，現在使用默認的就行
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",        // 作者，選填
  "license": "ISC"     // 許可證，默認即可
}

注：以上代碼使用時記得把註釋刪除，json不能註釋

1.3 新建項目文件

根目錄下新建index.js和upper.js兩個文件分別如下：

// upper.js
let toUpper = (a) => {
    return a.toUpperCase();
};
export default toUpper;

// index.js
import toUpper from './upper.js';
export default toUpper;

此時我們的項目就應該只有三個文件，如下：

upper.js用於項目功能邏輯，index.js用於導出功能模塊，package.json用於配置相關信息，這樣我們就把一個最簡單的npm包寫好了，接下里進入發佈。

1.4 發佈

1.註冊npm賬號

前往npm官網註冊一個賬號，記好賬戶名、密碼和郵箱（郵箱收到郵件後一定要進行驗證）。

2.源切換

這是個坑，估計很多小夥伴都踩過，畢竟國內npm的速度令人感動，所以大家都運行過一條熟悉的命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

但是發佈時我們一定要把源切換回npm，而不是淘寶源，當然，直接運行下面這個命令即可解決：

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

但是老這樣切來切去有點low啊，這時候nrm就派上用場了，nrm是什麼？簡單點說nrm就是專門用來管理和快速切換私人配置的registry的一個工具。

cnpm i nrm -g

安裝好後使用nrm ls命令會顯示如下：

*號在哪個地方就說明現在的源是哪個（我現在處在taobao源），也許你剛開始不顯示號，但不管顯不顯示，直接運行nrm use npm，然後再npm ls，這時候就發現`指在npm`源上了，此時就可以進行下一步了。

3.登錄

npm login

然後會提示你輸入用戶名、密碼（是密文的，你看不見，直接輸就行）和郵箱，登錄成功後會顯示:

4.試着發佈npm包

在項目根目錄下運行npm publish即可發佈，順利的話就直接成功了，當然也可能會遇到問題：

第一個就是權限問題，也許報這樣的錯誤npm ERR! Error: EPERM: operation not permitted，這時候就得使用管路員權限來進行發佈了，window + x會看到管理員終端選項，打開這個終端，然後再進行登錄，發佈即可。
第二個就是名稱問題，就是你的包名在npm上已經存在了，所以在package.json中將你的包名改成其他的，這樣再發布，應該就沒問題了。

發佈成功後顯示如下：

1.5 用用我們發佈的包

隨便找個練手項目試試：

cnpm i toupper-case-project -D

安裝完成：

說明我們的包是可以下載安裝的，然後試試功能，我就直接在vue項目中試試了，大家應該看得懂：

然後運行項目：

搞定！那如果我們後期把這個包改了呢，該怎麼做？

1.6 更新包

我們把upper.js文件改一改：

// upper.js
let toUpper = (a) => {
    return 'Hello' + a.toUpperCase();
};
export default toUpper;

然後記得把package.json中的版本號也改了，正常來說加1即可，
將"version": "1.0.0"改爲"version": "1.0.1"

現在運行npm publish就可以直接把新的包覆蓋上去：

然後我們在練手項目中怎麼更新這個包呢？

方法一（直接更新）：cnpm update toupper-case-project（有時可能更新不完全）
方法二（安裝覆蓋）：cnpm i toupper-case-project -D（這個比較靠譜）

然後運行項目：

完美！這就是一個最簡單的npm包，是不是沒有想象中的那麼觸不可及？但說實話，這個包確實挺low，你看別人的包還經過打包啊、測試啊、還能在vue中直接Vue.use()方式來使用，而且還有交互。那下面我們就來試試。

二、基於webpack和vue的npm包

直接使用vue-cli的話會帶上許多我們不需要的模塊，太笨重，所以我們直接擼一個，如果對webpack還不太熟悉的，可以看看我這篇webpack4.x最詳細入門講解

2.1 構建項目（星級評價組件）

我們來封裝一個可根據傳入的評分數來顯示星級的組件，類似這樣的：

具體代碼請移步github，請反手給個 ★ Star ^_~，下面開始：

首先新建一個名爲star-evaluation的項目文件夾；
然後根據以下結構建立項目文件：

|——src
|    |——images
|    |     |——[email protected]
|    |     |——[email protected]
|    |     |——[email protected]
|    |——index.js
|    |——Star.vue
|——.npmignore  // 用於忽略不需要上傳到npm的文件
|——package.json
|——README.md
|——webpack.config.js

各文件如下：

Star.vue具體代碼如下，主要就是將傳過來的數值處理後遍歷出不同的class類名，然後添加到span上。

<!-- Star.vue -->
<template>
  <div class="star">
    <span class="star-item" v-for="(itemClass, index) in itemClasses" :key="index" :class="itemClass"></span>
  </div>
</template>

<script>

// 星星長度
const LENGTH = 5;
// 星星狀態
const CLS_ON = 'on';
const CLS_HALF = 'half';
const CLS_OFF = 'off';

export default {
  data () {
    return {
    }
  },
  props: {
    score: {
      type: Number
    }
  },
  computed: {
    itemClasses () {
      let result = [];
      // 如果小數大於或等於0.5則變爲0.5，否則爲0
      let score = Math.floor(this.score * 2) / 2;
      // 全星
      let integer = Math.floor(score);
      // 半星
      let hasHalf = score % 1 !== 0;
      // 遍歷全星
      for (let i = 0; i < integer; i++) {
        result.push(CLS_ON);
      }
      // 處理半星
      if (hasHalf) {
        result.push(CLS_HALF);
      }
      // 補齊，如果星數小於5，則一直循環判斷填入數據，直到滿足條件
      while (result.length < LENGTH) {
        result.push(CLS_OFF);
      }
      return result;
    }
  }
}
</script>

<style lang="scss" scoped>
  .star{
    font-size: 0;
    .star-item{
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 3px;
      background-repeat: no-repeat;
      background-size: 10px 10px;
      &:last-child{
        margin-right: 0;
      }
    }
    /* 三種圖片類型*/
    .on{
      background-image: url(./images/[email protected]);
    }
    .half{
      background-image: url(./images/[email protected]);
    }
    .off{
      background-image: url(./images/[email protected]);
    }
  }
</style>

// index.js
import Star from './Star.vue';
export default Star;

package.json的依賴配置如下：

{
  "name": "star-evaluation",
  "version": "1.0.0",
  "description": "A plugin which use stars number to evaluate",
  "main": "dist/bundle.js",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --open --mode development"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Better-Alan/star-evaluation.git"
  },
  "keywords": ["star", "evaluation"],
  "author": "BetterMan",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "node-sass": "^4.9.4",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue": "^2.5.17",
    "vue-hot-reload-api": "^2.2.4",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.4.2",
    "vue-router": "^3.0.1",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.5.9",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2"
  }
}

webpack.config.js配置如下，用於將/src中的內容打包到/dist（打包時會自動生成/dist文件夾）中的bundle.js，bundle.js其實就相當於我們的插件。

// webpack.config.js
const path = require('path');  // 路徑處理模塊
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
    entry: {
        index: path.join(__dirname, "/src/index.js")   // 入口
    }, 
    output: {
        path: path.join( __dirname, "/dist"), // 打包後的文件存放的地方
        publicPath: '/dist/',  // 設置公共路徑
        filename: "bundle.js", // 打包後輸出文件的文件名
        libraryTarget: 'umd'   // 將你的library暴露爲所有的模塊定義下都可運行的方式，它將可在 CommonJS, AMD 環境下運行
    },
    module: {
        rules: [
            {
                test: /\.vue$/,   // vue-loader
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,           // 正則匹配以.css結尾的文件
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(scss|sass)$/,   // 正則匹配以.scss和.sass結尾的文件
                use: ['style-loader', 'css-loader', 'sass-loader']  // 需要用的loader，一定是這個順序，因爲調用loader是從右往左編譯的
            },
            {
                test: /\.(png|jpg|svg|gif)$/,  // 圖片loader
                use: ['url-loader']
            },
            {
                test: /\.js$/,    
                exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
                loader: 'babel-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

.npmignore（別忘了前面的點）文件用於忽略不需要上傳到npm的文件，規則和.gitignore一樣。如果你的項目內有.gitignore但沒有.npmignore，則會使用.gitignore的配置。

.*
*.md
node_modules/
src/

README.md說明（不是必須），大家應該都比我6。

此時我們的目錄應該如下：

2.2 安裝依賴

以上文件都配置好後就可以運行一下命令安裝依賴了：

cnpm install

2.3 打包項目

依賴安裝完成後對項目進行打包：

npm run build

2.4 登錄併發布（確保當前處於npm源）

打包完成後運行npm login登錄後npm publish發佈：

發佈搞定！，那能不能用呢？我們去試試看。

2.5 試試我們的npm包

先下載：
```
cnpm i star-evaluation -D
```

項目中引入使用：

運行後顯示如下：

搞定，這是不是比之前那個toupper-case-project插件高端那麼一丟丟？

那有的小夥伴可能會說了：“我平時看到的插件不是這麼用的，很多都是直接Vue.use()後就可以用了，而且插件還有事件的。”

那我們再改改？

三、升級包

其實能否使用Vue.use()這個方式來調用組件，取決於是否配置了install方法，我們給Star.vue組件加上看看：

3.1 配置install方法

// index.js
import Star from './Star.vue';

Star.install = Vue => Vue.component(Star.name, Star);  // 給Star組件配置install方法，註冊該組件 

export default Star;

注：這裏有個需要注意的地方，就是Star.name是指向我們給Star.vue文件中配置的name屬性，別忘了配置它：

這時已經搞定了Vue.use()了，那我們再加上事件交互，就做個點擊組件彈出具體的星級數值吧！

3.2 添加事件

具體修改如下：

<!-- Star.vue -->
<template>
  <!-- 綁定showNumber方法 -->
  <div class="star" @click="showNumber">
    <span class="star-item" v-for="(itemClass, index) in itemClasses" :key="index" :class="itemClass"></span>
  </div>
</template>

<script>
...
export default {
  name: 'Star',   // 別忘加上這個屬性
  ...
  methods: {
    showNumber() {
      this.$emit('showNumber', '我是彈出的信息');  // 將自定義方法showNumber暴露出去,且將參數傳出
    }
  }
}
</script>
...

3.3 打包-發佈-使用

依舊老套路，修改版本號-打包-發佈，然後我們在練手項目中cnpm i star-evaluation -D再安裝一次，因爲有時npm update star-evaluation方法不太靠譜，更新不完全。

然後我們在練手項目中使用Vue.use()方式和試試事件，在所要使用插件的文件中使用方式如下：

<template>
  <div class="hello">
    <!-- 子組件所傳出的自定義showNumber方法調用當前showMessage方法 -->
    <Star @showNumber="showMessage" :score="2.6"/>
  </div>
</template>

<script>

import Vue from 'vue'   // 引入Vue
import Star from 'star-evaluation';  // 引入Star插件
Vue.use(Star)  // 使用Star插件

// 以上的引入和註冊一般是在main.js中統一完成，這個大家應該都比較熟悉

export default {
  // 因爲使用了Vue.use(Star)方式，所以這裏不需要使用components: {Star}來註冊插件
  methods: {
    // 點擊組件觸發此方法
    showMessage(mes) {
      alert(mes);
    }
  }
}
</script>

<style scoped>
</style>

然後我們npm run dev重啓啓用項目，點擊組件顯示如下：

搞定！是不是也沒那麼難？

最後

本來只打算簡單的寫下基本步驟的，沒想到寫（囉嗦）了這麼長，有寫得不合適的地方請多多指教，如果能對你有所幫助，也麻煩github給個星哈，這樣我就可以放心的去搬磚了↓-↓

掘金
 博客園

不會發布npm包？進來看看？

前言

一、一個最簡單的npm包

1.1 新建文件夾

1.2 初始化項目

1.3 新建項目文件

1.4 發佈

1.5 用用我們發佈的包

1.6 更新包

二、基於webpack和vue的npm包

2.1 構建項目（星級評價組件）

2.2 安裝依賴

2.3 打包項目

2.4 登錄併發布（確保當前處於npm源）

2.5 試試我們的npm包

三、升級包

3.1 配置install方法

3.2 添加事件

3.3 打包-發佈-使用

最後

徹底弄懂JS原型與繼承

不會發布npm包？進來看看？

徹底弄懂JS原型與繼承

不會發布npm包？進來包會！

webpack4.x最詳細入門指南

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

不會發布npm包？進來看看？

前言

一、一個最簡單的npm包

1.1 新建文件夾

1.2 初始化項目

1.3 新建項目文件

1.4 發佈

1.5 用用我們發佈的包

1.6 更新包

二、基於webpack和vue的npm包

2.1 構建項目（星級評價組件）

2.2 安裝依賴

2.3 打包項目

2.4 登錄併發布（確保當前處於npm源）

2.5 試試我們的npm包

三、 升級包

3.1 配置install方法

3.2 添加事件

3.3 打包-發佈-使用

最後

三、升級包