如何發佈一個包到npm && 如何使用本身發佈的npm包 && 如何更新發布到npm的package && 如何更新當前項目的包？

如何發佈一個包到npm

First

　　在https://www.npmjs.com註冊一個帳號。 

 

Second

　　編輯好項目，文件大體以下：

其中，gitignore能夠以下：

.DS_Store
node_modules/
dist/

注意：不能包含 npm-debug.log 。

 

Third: 

npm login

 

 

Fourth: 

npm publish

注意：若是使用了cnpm（默認使用），會報錯：no_perms Private mode enable, only admin can publish this module

設置：npm config set registry http://registry.npmjs.org 便可。

這樣就發佈成功了。

 

 

 

 

 

 

如何使用本身發佈的npm包

　　即第一步： npm install toast-for-vue --save ， 而後咱們就能夠發現根目錄下的node_modules文件中多了這個包，而這個包就是我發佈的包：

                    

 

　　第二步： 在src下的main.js中引入兩個文件，以下所示：可是在使用過程當中遇到了困難，就是在main.js（我使用的是vue-cli構建的項目）的引入方式以下：

import Toast from 'toast-for-vue'
import 'toast-for-vue/lib/toast.css'
Vue.use(Toast);

　　可是，屢次嘗試後臺都在報錯，提示這個包沒有安裝，我也是百思不得其解。 最後終於發現了問題所在！

　　由於我發現我只引入 css 文件的時候是能夠引進來的，而引入 Toast 時卻引不進來，因而我就嘗試了下面兩種方式，發現均可以成功引入：

import Toast from 'toast-for-vue/lib'
import Toast from 'toast-for-vue/lib/index.js'

　　因而，我天然想到了入口文件，個人package.json文件內容以下：

{
  "name": "toast-for-vue",
  "version": "1.0.0",
  "description": "toast used with vue project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/zzw918/toast-for-vue.git"
  },
  "keywords": [
    "toast",
    "vue",
    "plugin"
  ],
  "author": "John Zhu",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/zzw918/toast-for-vue/issues"
  },
  "homepage": "https://github.com/zzw918/toast-for-vue#readme"
}

 

　　能夠發現，入口文件是index.js， 那麼當我引入 toast-for-vue 時，確定是不能獲得 Toast 的， 由於在根目錄下麼有index.js ，注意，爲何我想要直接引入的時 Toast 呢？ 由於在index.js中我導出了Toast插件，以下所示：

/**
 * toast-for-vue v1.0.0
 * https://github.com/zzw918/toast-for-vue
 * Released under the MIT license
 * Date: 2017-05-22
 * Author: John Zhu , in xjtu
 */

var Toast = {};
Toast.install = function (Vue, options) {
  // set default option 
  var defaultOpt = {
    defaultType: 'center',
    defaultDuration: '2000'
  };

  // replace the option if we set params in Vue.use()
  for (var prop in options) {
    defaultOpt[prop] = options[prop];
  }

  // define the core function 
  Vue.prototype.$toast = function (message, type) {

    // we think center type the default type
    if (typeof type == "undefined") {
      var curType = defaultOpt.defaultType;
    } else {
      var curType = type;
    }

    // if toast is used, we should delay the defaultDuration
    if (document.querySelector('.toast')) {
      function getTime() {
        return new Date().getTime();
      }
      var startTime = getTime();
      while (getTime() < startTime + defaultOpt.defaultDuration);
    }

    // create the constructor
    var template = Vue.extend({
      template: '<div class="toast toast-' + curType + '">' + message + "</div>"
    });

    // create an instance and mount it on an element
    var temEle = new template().$mount().$el;

    // insert the instance 
    document.body.appendChild(temEle);

    // after the duration time, remove it
    setTimeout(function () {
      document.body.removeChild(temEle);
    }, defaultOpt.defaultDuration);
  };

  // set different kinds for call
  ['bottom', 'center', 'top'].forEach(function (type) {
    Vue.prototype.$toast[type] = function (message) {
      return Vue.prototype.$toast(message, type);
    }
  });
}

module.exports = Toast;

View Code

　　這樣就不難理解了！  因此當務之急是設置好入口文件。 即"main": "lib/index.js",  欲瞭解更多，請看下文。。。

 

如何更新發布到npm的package？

　　在上面的過程當中，因爲沒有入口文件，因此這是一個bug，我但願添加一個入口文件，因此想要更新 npm 包，並從新引入。 現介紹方法。 

　　咱們在package.json中添加入口文件，以下所示：

{
  "name": "toast-for-vue",
  "version": "1.0.0",
  "description": "toast used with vue project",
  "main": "lib/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/zzw918/toast-for-vue.git"
  },
  "keywords": [
    "toast",
    "vue",
    "plugin"
  ],
  "author": "John Zhu",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/zzw918/toast-for-vue/issues"
  },
  "homepage": "https://github.com/zzw918/toast-for-vue#readme"
}

　　即這時我修改了入口文件。 

　　

接着，git add --all、 git commit 、git push 。。。 

 

接下來，由於咱們的包已經變了，因此咱們就要更換版本， 以下：

即在patch以後，版本自動就成爲了 1.0.1。 

 

最後， npm publish 便可。 （注意：不要用git bash，使用管理員方式打開cmd便可。）

 

ok！ 這樣，咱們進入npm官網，就會發現版本已經變化了：

 

 

---

---

---

---

---

---

　　

　　好了，在上面的過程當中，咱們已經把包進行了升級，因此咱們的項目中使用的版本也須要迭代， 因此，這時候，咱們就須要進行更新包了，更新包很是簡單，使用：

npm update toast-for-vue

　　這樣就能夠成功更新了！ 

　　補充： 其實這裏更好的作法是 npm install toast-for-vue --save

 

　　

import Toast from 'toast-for-vue'
import 'toast-for-vue/lib/toast.css'
Vue.use(Toast);

　　這樣，就能夠成功使用了！！！ 

 

恩，就是爲了這個小效果！！！