vue組件打包及發佈npm的整個流程

vue組件發佈npm整個流程

記錄一下組件發佈流程，參考Vue cli3 庫模式搭建組件庫併發布到 npm

起步

首先，咱們從零開始搭建一個vue項目，以vue-cli3 來搭建。

vue create my-project
複製代碼

長這樣子的：

調整目錄

安裝項目以後咱們來修改一下目錄結構

.
...
|-- examples      // 原 src 目錄，改爲 examples 用做示例展現
|-- packages      // 新增 packages 用於編寫存放組件
...
. 
複製代碼

修改以後，運行項目咱們會發現報錯了，那是由於目錄結構改了，還有就是packges這個文件夾是咱們新增的，webpack沒法獲取編譯，咱們須要在webpack里加上。

咱們會新建一個vue.config.js的配置文件，這個vue-cli3提供的一個可選配置文件，咱們能夠在裏面配置整個項目全部的webpack配置。 咱們能夠直接去 vue-cli3的配置 複製過來,而 chainWebpack 會給咱們提供鏈式操做

// vue-config.js
module.exports = {
  // 修改 src 目錄 爲 examples 目錄
  pages: {
    index: {
      // page 的入口
      entry: 'examples/main.js',   // 把src 修改成examples
      // 模板來源
      template: 'public/index.html',
      // 在 dist/index.html 的輸出
      filename: 'index.html'
    }
  },
  // 擴展 webpack 配置，使 packages 加入編譯
  /* chainWebpack 是一個函數，會接收一個基於 webpack-chain 的 ChainableConfig 實例。容許對內部的 webpack 配置進行更細粒度的修改。 */
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add(__dirname + 'packages')  // 注意這裏須要絕對路徑，全部要拼接__dirname
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          // 修改它的選項...
          return options
        })
  }
}
複製代碼

以上就是基本的配置，接下來咱們就開始建立一個組件

編寫組件

這裏我就以一個按鈕組件來作嘗試。 在以前咱們新建的 packages 目錄中新建 comColorButton 文件夾和index.js文件，而後再在comColorButton文件夾裏，建立src文件夾和index.js文件，目錄結構以下：

|——
|——packages
|   |——index.js
|   |——comColorButton
|      |——index.js
|      |——src
|         |——color-button.vue
|——
複製代碼

這是color-button.vue的內容

<!-- color-button.vue -->
<template>
  <span class="color-button">
    <button :class="[type, disabled?'disabled':'']" :disabled="disabled">
      <slot></slot>
    </button>
  </span>
</template>

<script>
export default {
  name:'ComColorButton',
  props:{
      type:{
      type:String,
      default:'primary'
    },
      disabled:{
      type:Boolean,
      default:false
    },
  }, 
  data () {
    return {

    }
  }
}
</script>

<style lang='scss'>
$pColor:#333;
$sColor:#0db677;
$wColor:orange;
$dColor:red;
$disabledColor:gray;
.color-button{
  display: inline-block;
  margin-right:10px;
  button{
    display: inline-block;
    padding:10px 20px;
    border:2px solid $pColor;
    background:#fff;
    font-size: 16px;
    width:auto;
    cursor: pointer;
    transition:all 0.5s;
    &:hover{
      box-shadow: 100px 0px 0px 0px $pColor inset;
      color:#fff;
    }
    &.success{
      border:2px solid $sColor;
      color: $sColor;
      &:hover{
        box-shadow: 100px 0px 0px 0px $sColor inset;
        color:#fff;
      }
    }
    &.warning{
      border:2px solid $wColor;
      color: $wColor;
      &:hover{
        box-shadow: 100px 0px 0px 0px $wColor inset;
        color:#fff;
      }
    }
    &.danger{
      border:2px solid $dColor;
      color: $dColor;
      &:hover{
        box-shadow: 100px 0px 0px 0px $dColor inset;
        color:#fff;
      }
    }
    &.disabled{
      border:2px solid $disabledColor;
      color: $disabledColor;
      cursor:not-allowed ;
      &:hover{
        box-shadow:none;
        color: $disabledColor;
      }
    }
  }
}
</style>

複製代碼

這是comColorButton文件夾內的index.js

// 導入組件，組件必須聲明 name
import ComColorButton from './src/color-button.vue'

// 爲組件提供 install 安裝方法，供按需引入
ComColorButton.install = function (Vue) {
  Vue.component(ComColorButton.name, ComColorButton)
}

// 默認導出組件
export default ComColorButton
複製代碼

這是 packages 文件夾內的index.js

import ComColorButton from './comColorButton'
// 存儲組件列表
const components = [
  ComColorButton
] 
/* 定義install 方法，接收Vue做爲參數，若是使用use註冊插件，則全部的組件都將被註冊 */
const install = function (Vue) {
  // 判斷是否安裝
  if(install.installed){return}
  // 遍歷全部組件
  components.map(item => {
    Vue.component(item.name,item)
  })
}
// 判斷是否引入文件
if(typeof window !== 'undefined' && window.Vue){
  install(window.Vue)
}
export default{
  install,
  ComColorButton
}
複製代碼

以上以後，組件就寫完了，接下來就是引入組件了

/* main.js */
// 導入組件庫
import ComColorButton from './../packages/index'
// 註冊組件庫
Vue.use(ComColorButton)
複製代碼

使用組件庫

<template>
  <div class="hello">
    <com-color-button type="success" :disabled="false">按鈕</com-color-button> 
    <com-color-button :disabled="true">按鈕</com-color-button>
  </div>
</template>
複製代碼

咱們能夠看到效果：

發佈npm 方便直接在項目中引用

到此爲止咱們一個完整的組件庫已經開發完成了，接下來就是發佈到 npm 以供後期使用

一、package.json 中新增一條編譯爲庫的命令

在庫模式中，Vue是外置的，這意味着即便在代碼中引入了 Vue，打包後的文件也是不包含Vue的。

如下咱們在 scripts 中新增一條命令 npm run lib

• --target: 構建目標，默認爲應用模式。這裏修改成 lib 啓用庫模式。
• --dest : 輸出目錄，默認 dist。這裏咱們改爲 lib
• [entry]: 最後一個參數爲入口文件，默認爲 src/App.vue。這裏咱們指定編譯 packages/ 組件庫目錄。

"scripts": {
    // ...
    "lib": "vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js"
}
複製代碼

執行編譯庫命令

npm run lib
複製代碼

以後咱們就能夠看到會生成一個文件夾lib包含不少文件，長這樣子的：

二、配置 package.json 文件中發佈到 npm 的字段

• name: 包名，該名字是惟一的。可在 npm 官網搜索名字，若是存在則需換個名字。
• version: 版本號，每次發佈至 npm 須要修改版本號，不能和歷史版本號相同。
• description: 描述。
• main: 入口文件，該字段需指向咱們最終編譯後的包文件。
• keyword：關鍵字，以空格分離但願用戶最終搜索的詞。
• author：做者
• private：是否私有，須要修改成 false 才能發佈到 npm
• license： 開源協議 如下爲參考設置

"name": "com-color-button",
  "version": "0.1.3",
  "description": "基於 Vue 的按鈕",
  "main": "lib/comColorButton.umd.min.js",
  "keyword": "colorButton button color",
  "private": false,

複製代碼

三、添加 .npmignore 文件，設置忽略發佈文件

咱們發佈到 npm 中，只有編譯後的 lib 目錄、package.json、README.md纔是須要被髮布的。因此咱們須要設置忽略目錄和文件。 和 .gitignore 的語法同樣，具體須要提交什麼文件，看各自的實際狀況。

# 忽略目錄
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

複製代碼

四、登陸到 npm

首先須要到 npm 上註冊一個帳號,注意驗證郵箱，否則以後會發布不了。 若是配置了淘寶鏡像，先設置回npm鏡像

npm config set registry http://registry.npmjs.org 
複製代碼

而後在終端執行登陸命令，輸入用戶名、密碼、郵箱便可登陸。

npm login
複製代碼

五、發佈到 npm

執行發佈命令，發佈組件到 npm

npm publish
複製代碼

這裏若是尚未驗證郵箱的話話報個，須要驗證郵箱的錯誤。去npm上驗證郵箱便可，它會在頁面頂部彈出個須要驗證郵箱的提示。

六、發佈成功

發佈成功後稍等幾分鐘，可查看本身npm帳號的packages，也可在 npm 官網搜索。

去npm查看，咱們能夠packages下看到發佈成功了，以下圖：

七、使用新發布的組件庫

安裝

cnpm install com-color-button -S
複製代碼

引入

<!--main.js-->
import ComColorButton from 'com-color-button'
import 'com-color-button/lib/comColorButton.css'
Vue.use(ComColorButton)
複製代碼

組件中使用

...
<com-color-button type="success">按鈕</com-color-button>
...
複製代碼

到此就所有結束了，這都是親自實踐過的，可用。