組件庫發佈到npm全流程

1、初衷

在上個月面試的過程當中，好幾家公司都問到是否有開源項目，在通往高級資深的路上，彷佛已經成了不可缺乏的一項；這篇文章會詳細介紹整個全流程；大佬們操做起來吧~

2、項目搭建

1.建立項目

vue init mxdm-ui
複製代碼

2.調整目錄

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

3.調整配置 新增vue.config.js

module.exports = {
    pages:{
        index:{
            entry:"test/main.js",
            // 模板來源
            template: 'public/index.html',
            // 在 dist/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
        })
  }
}
複製代碼

3、編寫組件

1.建立一個最基本的button組件

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

packages文件下的index.js爲全部組件的出口

import Button from './button'
const components = [
    Button
]
// 定義 install 方法，接收 Vue 做爲參數。若是使用 use 註冊插件，則全部的組件都將被註冊
const install = function (Vue) {
    // 遍歷註冊全局組件
    components.forEach(component => {
      Vue.component(component.name, component)
    })
  }
  
  // 判斷是不是直接引入文件
  if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
  }
  export default {
  // 導出的對象必須具備 install，才能被 Vue.use() 方法安裝
    install,
    Button
  }
複製代碼

button下的index.js爲button組件出口

import ElButton from './src/button.vue';
ElButton.install = function(Vue){
    Vue.component(ElButton.name, ElButton);
}

export default ElButton;
複製代碼

在這裏button/src/button.vue就不具體展現了

4、使用組件

1.main.js導入組件庫

// 導入組件庫
import mxdmUI from '../packages'
Vue.use(mxdmUI)

複製代碼

2.使用

<mx-button size="small">默認按鈕</mx-button>
<mx-button type="primary" >主要按鈕</mx-button>
<mx-button type="warning" size="small">主要按鈕</mx-button>
複製代碼

5、發佈到npm

1.package.json 新增打包成庫的命令

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

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

2.執行命令

npm run lib
複製代碼

生成dist文件

3.packjson文件配置說明

{
  "name": "mxdm-ui", //包名
  "version": "0.1.5",//版本號
  "description": "mxdm-ui組件庫",//描述
  "main": "dist/mxdm-ui.umd.min.js",// 入口文件,打包後的壓縮文件
  "keyword":"mxdm-ui",//關鍵詞
  "private": false, //是否私有 必須爲false
 }

複製代碼

4.登陸npm

保證鏡像切回npm

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

執行npm login命令，系統會提示輸入帳戶和密碼。若是沒有npm帳戶，請註冊。

npm login
複製代碼

登陸成功後，就能夠再次執行 npm publish 進行發佈

5.發佈到 npm

發佈以前能夠配置.npmignore 文件

# 忽略目錄
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map
複製代碼

執行發佈命令

npm publish
複製代碼

6.發佈成功

7.安裝驗證

npm install mxdm-ui
複製代碼

在 main.js 引入並註冊

import mxdm-ui from 'mxdm-ui' 
vue.use(mxdm-ui)
複製代碼

6、項目地址

github地址：github.com/minxiang515…

7、❤️感謝閱讀

1. 若是本文對你有幫助，不要吝嗇你的贊喲，你的「贊」是我前行的動力。
2. 歡迎關注公衆號 【前端冥想】，也可掃碼加我微信備註 【加羣】 拉你進交流分享羣，一塊兒學習進步。