搭建基於Vue cli3 的組件庫並發布到 npm的流程

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

一、技術棧

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

二、大綱

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

1. 規划目錄結構
2. 配置項目以支持目錄結構
3. 編寫組件
4. 編寫示例
5. 配置使用庫模式打包編譯
6. 發布到npm

三、規划目錄結構

1、創建項目

在指定目錄中使用命令創建一個默認的項目，或者根據自己需要自己選擇。

 vue create 項目名

2、調整目錄

我們需要一個目錄存放組件，一個目錄存放示例，按照以下方式對目錄進行改造。

.
...
|-- examples // 原 src 目錄，改成 examples 用作示例展示
|-- packages // 新增 packages 用於編寫存放組件
...
.

 

 

 

 

 

 

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

我們通過上一步的目錄改造后，會遇到兩個問題。

1. src 目錄更名為 examples ，導致項目無法運行
2. 新增 packages 目錄，該目錄未加入 webpack 編譯

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

1、重新配置入口，修改配置中的 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'
 　}
 }
}

2、支持對 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'
    }
  },
  // 強制內聯CSS
  css: { extract: false },
  // 擴展 webpack 配置，使 packages 加入編譯
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add('/packages')
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          // 修改它的選項...
          return options
        })
  }
}

鏈式操作

五、編寫組件

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

GitHub - 顏色選擇器：vcolorpicker-ui

1. 創建一個新組件

1. 在 packages 目錄下，所有的單個組件都以文件夾的形式存儲，所有這里創建一個目錄 color-picker/
2. 在 color-picker/ 目錄下創建 src/ 目錄存儲組件源碼
3. 在 /color-picker 目錄下創建 index.js 文件對外提供對組件的引用。

 

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

// 導入組件
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
}

六、編寫示例

1、在示例中導入組件庫：demo-ui\examples\main.js

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");

2、在示例中使用組件庫中的組件：demo-ui\examples\App.vue

在上一步用使用 Vue.use() 全局注冊后，即可在任意頁面直接使用了，而不需另外引入。當然也可以按需引入。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <colorPicker v-model="color" v-on:change="headleChangeColor"></colorPicker>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  data () {
    return {
      color: '#ff0000'
    }
  },
  components: {
    // HelloWorld
  },
  methods: {
    headleChangeColor () {
      console.log('顏色改變')
    }
  }
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

七、發布到 npm，方便直接在項目中引用

到此為止我們一個完整的組件庫已經開發完成了，接下來就是發布到 npm 以供后期使用。

1、 package.js 中新增一條編譯為庫的命令

在庫模式中，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

 

 2、配置 package.json 文件中發布到 npm 的字段,以下為參考設置

{
  "name": "vcolorpicker-ui",
  "version": "0.1.2",
  "description": "基於 Vue 的顏色選擇器",
  "main": "lib/vcolorpicker.umd.min.js",
  "keyword": "vcolorpicker colorpicker color-picker",
  "private": false,
 },

3、添加 .npmignore 文件，設置忽略發布文件

我們發布到 npm 中，只有編譯后的 lib 目錄、package.json、README.md才是需要被發布的。所以我們需要設置忽略目錄和文件。和 .gitignore 的語法一樣，具體需要提交什么文件，看各自的實際情況。

# 忽略目錄
examples/
packages/
public/
 
# 忽略指定文件
vue.config.js
babel.config.js
*.map

4、登錄到 npm

4.1 首先需要到 npm 上注冊一個賬號，注冊過程略。

4.2 如果配置了淘寶鏡像，先設置回npm鏡像：(可省略此步驟)

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

4.3 然后在終端執行登錄命令，輸入用戶名、密碼、郵箱即可登錄。

npm login

 

 5、發布到 npm

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

npm publish

 

 

6、發布成功

發布成功后稍等幾分鍾，即可在 npm 官網搜索到。以下是剛提交的 vcolorpicker-ui

 

 7、效果圖

 

 

總結

以上所述是小編給大家介紹的基於Vue cli3 組件庫的搭建和發布到 npm的流程 ，希望對大家有所幫助，在此也非常感謝大家對博客園網站的支持！