vue-cli 3.x 自定義外掛併發布到 npm
乾貨轉載——https://www.cnblogs.com/wisewrong/archive/2018/12/28/10186611.html
全是知識點吶
趕緊記下來啊
一、調整專案結構
首先用 vue-cli 建立一個 default 專案
// 順便安利一篇文章《Vue 爬坑之路(十二)—— vue-cli 3.x 搭建專案》
當前的專案目錄是這樣的:
首先需要建立一個 packages 目錄,用來存放元件
然後將 src 目錄改為 examples 用作示例
二、修改配置
啟動專案的時候,預設入口檔案是 src/main.js
將 src 目錄改為 examples 之後,就需要重新配置入口檔案
在根目錄下建立一個 vue.config.js 檔案
// vue.config.js module.exports = { // 將 examples 目錄新增為新的頁面 pages: { index: { // page 的入口 entry: 'examples/main.js', // 模板來源 template: 'public/index.html', // 輸出檔名 filename: 'index.html' } } }
完成這一步之後就可以正常啟動專案了
vue-cli 3.x 提供了構建庫的命令,所以這裡不需要再為 packages 目錄配置 webpack
三、開發元件
之前已經建立了一個 packages 目錄,用來存放元件
該目錄下存放每個元件單獨的開發目錄,和一個 index.js 整合所有元件,並對外匯出
每個元件都應該歸類於單獨的目錄下,包含其元件原始碼目錄 src,和 index.js 便於外部引用
這裡以 textarea 元件為例,完整的 packages 目錄結構如下:
textarea/src/main.vue 是元件的開發檔案,具體程式碼這裡就不展示了
需要注意的是,元件必須宣告 name,這個 name 就是元件的標籤
textarea/index.js 用於匯出單個元件,如果要做按需引入,也需要在這裡配置
// packages/textarea/index.js // 匯入元件,元件必須宣告 name import Textarea from './main.vue' // 為元件新增 install 方法,用於按需引入 Textarea.install = function (Vue) { Vue.component(Textarea.name, Textarea) } export default Textarea
四、整合並匯出元件
編輯 packages/index.js 檔案,實現元件的全域性註冊
// packages / index.js // 匯入單個元件 import Textarea from './textarea/index' // 以陣列的結構儲存元件,便於遍歷 const components = [ Textarea ] // 定義 install 方法 const install = function (Vue) { if (install.installed) return install.installed = true // 遍歷並註冊全域性元件 components.map(component => { Vue.component(component.name, component) }) } if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } export default { // 匯出的物件必須具備一個 install 方法 install, // 元件列表 ...components }
到這裡元件就已經開發完畢
可以在 examples/main.js 中引入該元件
import TagTextarea from '../packages/index' Vue.use(TagTextarea)
然後就能直接使用剛才開發的 textarea 元件
元件的標籤就是元件內定義的的 name
這時候可以 npm run serve 啟動專案,測試一下元件是否有 bug
// 啟動前需要確保已經在 vue.config.js 中添加了新入口 examples/main.js
五、打包元件
vue-cli 3.x 提供了一個庫檔案打包命令
主要需要四個引數:
1. target: 預設為構建應用,改為 lib 即可啟用構建庫模式
2. name: 輸出檔名
3. dest: 輸出目錄,預設為 dist,這裡我們改為 lib
4. entry: 入口檔案路徑,預設為 src/App.vue,這裡改為 packages/index.js
基於此,在 package.json 裡的 scripts 新增一個 lib 命令
// pageage.json { "scripts": { "lib": "vue-cli-service build --target lib --name tag-textarea --dest lib packages/index.js" } }
然後執行 npm run lib 命令,編譯元件
六、準備釋出
首先需要在 package.json 新增元件資訊
name: 包名,該名不能和已有的名稱衝突;
version: 版本號,不能和歷史版本號相同;
description: 簡介;
main: 入口檔案,應指向編譯後的包檔案;
keyword:關鍵字,以空格分割;
author:作者;
private:是否私有,需要修改為 false 才能釋出到 npm;
license:開源協議。
然後建立 .npmignore 檔案,設定忽略檔案
該檔案的語法和 .gitignore 的語法一樣,設定釋出到 npm 時忽略哪些目錄或檔案
.DS_Store node_modules/ examples/ packages/ public/ vue.config.js babel.config.js *.map *.html # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw*
七、釋出到 npm
如果以前改過 npm 的映象地址,比如使用了淘寶映象,就先改回來
npm config set registry http://registry.npmjs.org
如果沒有 npm 賬戶,可以通過 npm adduser 命令建立一個賬戶,或者到 npm 官網註冊
如果在官網註冊的賬戶,或者以前就有賬戶,就使用 npm login 命令登入
具體流程可以參考官方文件(谷歌瀏覽器->翻譯中文)
在釋出之前,一定要確保元件已經編譯完畢,而且 package.json 中的入口檔案(main)的路徑正確
一切就緒,釋出元件:
npm publish
emmmmmm....
本來到這裡就該結束了
不過我想一定有人好奇,文中 textarea 元件到底是啥(我一點也不好奇)
那就戳這裡 -> vue-tag-textarea