不會發布node包？進來看看

時間  2019-11-06
標籤 不會 發佈 node 進來 看看 简体版
原文   原文鏈接

前言

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

1、一個最簡單的npm包

1.1 新建文件夾

能夠找個地方直接建個文件夾，最好語義化一點，這樣之後也方便管理，咱們這裏用終端建文件夾：css

mkdir toupper-case-project   // 這裏咱們建了一個名爲toupper-case-project的文件夾
複製代碼

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

1.2 初始化項目

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

npm init
複製代碼

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

固然，你能夠一路回車下來，或者你使用npm init -y就能夠生成默認的package.json文件，效果都是同樣的，而後咱們獲得如下文件，簡單說明一下：node

// 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不能註釋webpack

1.3 新建項目文件

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

// upper.js
let toUpper = (a) => {
    return a.toUpperCase();
};
export default toUpper;
複製代碼
// index.js
import toUpper from './upper.js';
export default toUpper;
複製代碼

此時咱們的項目就應該只有三個文件，以下：github

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

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()方式來使用，並且還有交互。那下面咱們就來試試。

2、基於webpack和vue的npm包

直接使用vue-cli的話會帶上許多咱們不須要的模塊，太笨重，因此咱們直接擼一個，若是對webpack還不太熟悉的，能夠看看我這篇webpack4.x最詳細入門講解

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

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

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

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

|——src
|    |——images
|    |     |——star24_half@2x.png
|    |     |——star24_off@2x.png
|    |     |——star24_on@2x.png
|    |——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/star24_on@2x.png); } .half{ background-image: url(./images/star24_half@2x.png); } .off{ background-image: url(./images/star24_off@2x.png); } } </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包

  1. 先下載：
cnpm i star-evaluation -D
複製代碼

  1. 項目中引入使用：

運行後顯示以下：

搞定，這是否是比以前那個toupper-case-project插件高端那麼一丟丟？   那有的小夥伴可能會說了：「我平時看到的插件不是這麼用的，不少都是直接Vue.use()後就能夠用了，並且插件還有事件的。」   那咱們再改改？

3、 升級包

其實可否使用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給個星哈，這樣我就能夠放心的去搬磚了↓-↓

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程