Vue cli3 lib模式封裝alioss圖片上傳組件併發布到 npm

以前工做中組件都是封裝在項目裏，最近總想鼓搗一個組件發佈到npm上並供大夥使用，因此參考了一些文章弄了一下，固然使用的是最新的vuecli3工具其中的vue-cli-service build --target lib 文末我會經過源碼講解下lib 定製化的輸出umd模式的.min.js 不須要輸出多餘的文件

個人項目地址

• github.com/HeJinG90/al… 歡迎star，是一個圖片上傳的組件，圖片傳到alioss上
• 對象存儲oss 官網 help.aliyun.com/document_de… 能夠了解一波

1、技術棧

vuecli3

1、建立項目

經過vuecli3建立一個初始化項目，具體能夠查看官網。cli.vuejs.org/zh/guide/cr…

2、調整項目結構

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

• examples // 原 src 目錄，改爲 examples 用做示例展現
• packages // 新增 packages 用於編寫存放組件，以下圖爲個人項目結構

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

src目錄改名爲examples，致使項目沒法運行

• 注：vue.config.js 是一個可選的配置文件，若是項目的 (和 package.json 同級的) 根目錄中存在這個文件，那麼它會被 @vue/cli-service 自動加載。

• 從新配置入口，修改配置中的 pages 選項

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

• 這裏使用 pages 修改入口到 examples,設置css不單獨提取。

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

4、編寫組件

以上咱們已配置好對新目錄架構的支持，接下來咱們嘗試編寫組件。如下咱們以一個已發佈到 npm 的小插件做爲示例。具體代碼能夠看我項目源碼，我大概說下思路：

• 在 packages 目錄下，全部的單個組件都以文件夾的形式存儲，因此這裏建立一個文件夾 uploadpictures
• 在 uploadpictures 文件夾下建立 src 文件夾存儲組件源碼
• 在 /uploadpictures 文件夾下建立 index.js 文件對外提供對組件的引用。
• 修改 /packages/uploadpictures/index.js文件，對外提供引用。
• 建立組件的統一入口文件/packages/index.js，導出組件，其實跟elementui差很少 還能夠改形成按需引入。
• tip: 固然個人組件裏面有引用到elementui框架中的message和loading組件，在此感謝餓了嗎團隊組件框架解耦的比較好，我便抽取出來拿來用了。建立了loading message utils 三個文件夾。
• 而後就是引用

import Vue from 'vue'
import Loading from '../../loading/index'
Vue.use(Loading)
import Message from '../../message/index'
Vue.prototype.$message = Message;
import '../../loading/src/loading.css';
import '../../message/src/message.css';
複製代碼

5、編寫示例代碼

在examples文件夾裏編寫

<template>
  <div id="app">
    <uploadPictures @change = "getimg" :imgs = imgs :ossconfig = ossconfig :quality = 1 :dir = dir :size = 200 :num = 3 ></uploadPictures>
  </div>
</template>

<script>
import Vue from 'vue'
// 導入組件
import uploadPictures from '../packages/index'
// 使用組件
Vue.use(uploadPictures)
export default {
  name: 'app',
  data(){
       return{
           imgs:[], // 圖片數組
           ossconfig:{
                accessKeyId: '',
                accessKeySecret: '',
                bucket: '',
                region: 'oss-cn-beijing'
            },
            dir:'/images/' //目錄文件夾
       }
       
   },
   methods:{
     getimg(e){
           this.imgs = e;
       },
   }
}
</script>

複製代碼

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

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

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

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

• Vue Cli3 構建目標：庫

• 官方文檔：cli.vuejs.org/zh/guide/bu…

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

--target: 構建目標，默認爲app。這裏修改成 lib 啓用庫模式。 --dest : 輸出目錄，默認 dist。這裏咱們改爲 lib

• 最後一個參數爲入口文件，默認爲 src/App.vue。這裏咱們指定編譯 packages/ 組件庫目錄。

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

執行編譯庫命令

$ yarn lib
複製代碼

• 打包出來的文件

  

• 正常來講到這已經能夠了，可是package.json裏面main字段只須要其中到umd.min.js因此我要去源碼對- 其生成的多餘文件進行改造，重點來了哈。咱們來到node_modules 文件夾 找到@vue/cli-service 依賴包。

  

• 咱們先去index.js中把formats改下，

  

• 接着咱們去resolveLibConfig.js中修改下面的代碼，固然通讀人家源碼不可能，有需求就去看下源碼，改一下就好。

  

• 最後的結果固然是隻生成兩個文件，由於默認是啓用了sourcemap,因此會生成一個對應的.map文件

  

配置 package.json 文件中發佈到 npm 的字段 裏面有幾個重要的我提一下

• name: 包名，該名字是惟一的。可在 npm 官網搜索名字，若是存在則需換個名字。
• version: 版本號，每次發佈至 npm 須要修改版本號，不能和歷史版本號相同。
• main: 入口文件，該字段需指向咱們最終編譯後的包文件。
• private：是否私有，須要修改成 false 才能發佈到 npm
• license： 開源協議
• 固然能夠參考個人package.json文件，我重點說一下peerDependencies這個屬性，這個屬性的意思是當前的組件要依賴於哪一個包 ，好比我這個組件確定要依賴vue包，寫上版本就行了。還有需不須要在dependencies裏面寫依賴看本身的狀況，若是你寫的依賴版本高於宿主環境，可能會形成錯誤，因此我這不須要寫，由於alioss依賴不提供按需引用，因此所有打包到生成到文件裏了。
• 再說個重點，根據vuecli官網的指示: 構建庫或是 Web Component 時的 Polyfills 當使用 Vue CLI 來構建一個庫或是 Web Component 時，推薦給 @vue/babel-preset-env 傳入 useBuiltIns: false 選項。這可以確保你的庫或是組件不包含沒必要要的 polyfills。一般來講，打包 polyfills 應當是最終使用你的庫的應用的責任。因此咱們設置 babel.config.js，這樣會減小生成文件的體積。

module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', {
      "useBuiltIns": false
    }]
  ]
}
複製代碼

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

• 咱們發佈到 npm 中，只有編譯後的 lib文件夾、examples文件夾、package.json、README.md纔是須要被髮布的。因此咱們須要設置忽略目錄和文件。

# 忽略目錄
packages/
public/
 
# 忽略指定文件
vue.config.js
babel.config.js
複製代碼

登陸到 npm

首先須要到 npm 官網上註冊一個帳號，這個不是這篇文章重點，本身百度下就好。

$ npm login
複製代碼

發佈到 npm

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

$ npm publish
複製代碼

發佈成功

發佈成功後稍等幾分鐘，便可在 npm 官網搜索到。如下是剛提交的 alioss-uploadpictures

使用新發布的組件庫

安裝

yarn add alioss-uploadpictures
複製代碼

使用

import Vue from 'vue'
import uploadPictures from 'alioss-uploadpictures'
Vue.use(uploadPictures)
複製代碼

例子

具體參數以及使用能夠點擊下面的github地址

7、項目地址

Github 地址：github.com/HeJinG90/al…

npm 地址：www.npmjs.com/package/ali…