詳解：Vue cli3 庫模式搭建組件庫併發布到 npm

時間 2019-11-05

標籤詳解 vue cli3 cli 模式搭建組件併發 npm 简体版

原文原文鏈接

市面上目前已有各類各樣的UI組件庫，好比 Element 和 iView，他們的強大毋庸置疑。可是咱們面臨的狀況是需求愈來愈複雜，當它們不能再知足咱們需求的時候，這個時候就有必要開發一套屬於本身團隊的組件庫了。html

因此本文的目的就是讓讀者能經過此文，小能作一個簡單的插件供人使用，大能架構和維護一個組件庫不在話下。vue

如下一個簡單的顏色選擇器插件vColorPicker講述從開發到上線到npm的流程。webpack

vColorPicker 插件 DEMOgit

1、技術棧

如何經過新版腳手架建立項目，這裏就不提了，自行看官方文檔。github

Vue-cli3: 新版腳手架的庫模式，可讓咱們很輕鬆的建立打包一個庫
npm：組件庫將存放在npm
webpack：修改配置須要一點 webapck 的知識。

2、大綱

想要搭建一個組件庫，咱們必須先要有一個大概的思路。web

規劃目錄結構
配置項目以支持目錄結構
編寫組件
編寫示例
配置使用庫模式打包編譯
發佈到npm

3、規劃目錄結構

一、建立項目

在指定目錄中使用命令建立一個默認的項目，或者根據本身須要本身選擇。vue-cli

$ vue create .
複製代碼

二、調整目錄

咱們須要一個目錄存放組件，一個目錄存放示例，按照如下方式對目錄進行改造。npm

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

4、配置項目以支持新的目錄結構

咱們經過上一步的目錄改造後，會遇到兩個問題。json

src目錄改名爲examples，致使項目沒法運行
新增packages目錄，該目錄未加入webpack編譯

注：cli3 提供一個可選的 vue.config.js 配置文件。若是這個文件存在則他會被自動加載，全部的對項目和webpack的配置，都在這個文件中。bash

一、從新配置入口，修改配置中的 `pages` 選項

新版 Vue CLI 支持使用 vue.config.js 中的 pages 選項構建一個多頁面的應用。

這裏使用 pages 修改入口到 examples

module.exports = {
  // 修改 src 目錄 爲 examples 目錄
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  }
}
複製代碼

二、支持對 `packages` 目錄的處理，修改配置中的 `chainWebpack` 選項

packages 是咱們新增的一個目錄，默認是不被 webpack 處理的，因此須要添加配置對該目錄的支持。

chainWebpack 是一個函數，會接收一個基於 webpack-chain 的 ChainableConfig 實例。容許對內部的 webpack 配置進行更細粒度的修改。

module.exports = {
  // 修改 src 爲 examples
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  // 擴展 webpack 配置，使 packages 加入編譯
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add('/packages')
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          // 修改它的選項...
          return options
        })
  }
}
複製代碼

鏈式操做

webpack-chain

5、編寫組件

以上咱們已配置好對新目錄架構的支持，接下來咱們嘗試編寫組件。如下咱們以一個已發佈到 npm 的小插件做爲示例。

GitHub - 顏色選擇器：vcolorpicker

1. 建立一個新組件

在 packages 目錄下，全部的單個組件都以文件夾的形式存儲，全部這裏建立一個目錄 color-picker/
在 color-picker/ 目錄下建立 src/ 目錄存儲組件源碼
在 /color-picker 目錄下建立 index.js 文件對外提供對組件的引用。

修改 /packages/color-picker/index.js文件，對外提供引用。

# /packages/color-picker/index.js
// 導入組件，組件必須聲明 name
import colorPicker from './src/color-picker.vue'

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

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

2. 整合全部的組件，對外導出，即一個完整的組件庫

修改 /packages/index.js 文件，對整個組件庫進行導出。

// 導入顏色選擇器組件
import colorPicker from './color-picker'

// 存儲組件列表
const components = [
  colorPicker
]

// 定義 install 方法，接收 Vue 做爲參數。若是使用 use 註冊插件，則全部的組件都將被註冊
const install = function (Vue) {
  // 判斷是否安裝
  if (install.installed) return
  // 遍歷註冊全局組件
  components.map(component => Vue.component(component.name, component))
}

// 判斷是不是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  // 導出的對象必須具備 install，才能被 Vue.use() 方法安裝
  install,
  // 如下是具體的組件列表
  colorPicker
}
複製代碼

6、編寫示例

一、在示例中導入組件庫

import Vue from 'vue'
import App from './App.vue'

// 導入組件庫
import ColorPicker from './../packages/index'
// 註冊組件庫
Vue.use(ColorPicker)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

複製代碼

二、在示例中使用組件庫中的組件

在上一步用使用 Vue.use() 全局註冊後，便可在任意頁面直接使用了，而不需另外引入。固然也能夠按需引入。

<template>
	<colorPicker v-model="color" v-on:change="headleChangeColor"></colorPicker>
</template>

<script>
export default {
	data () {
		return {
			color: '#ff0000'
		}
	},
	methods: {
		headleChangeColor () {
			console.log('顏色改變')
		}
	}
}
</script>
複製代碼

7、發佈到 npm，方便直接在項目中引用

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

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

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

Vue Cli3 構建目標：庫

如下咱們在 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
複製代碼

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

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

如下爲參考設置

{
  "name": "vcolorpicker",
  "version": "0.1.5",
  "description": "基於 Vue 的顏色選擇器",
  "main": "lib/vcolorpicker.umd.min.js",
  "keyword": "vcolorpicker colorpicker color-picker",
  "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 官網搜索到。如下是剛提交的 vcolorpicker

七、使用新發布的組件庫

安裝

$ npm install vcolorpicker -S
複製代碼

使用

# 在 main.js 引入並註冊
import vcolorpicker from 'vcolorpicker'
Vue.use(vcolorpicker)

# 在組件中使用
<template>
  <colorPicker v-model="color" />
</template>
<script>
  export default {
    data () {
      return {
        color: '#ff0000'
      }
    }
  }
</script>
複製代碼