爲了擺脫鹹魚的身份,我給本身定了一個開源項目的目標html
因而抽空寫了一個 textarea,打算髮布到 npm 的時候卻遇到了問題vue
以前用 vue-cli 2.x 的時候,打包配置項很是透明,能夠很容易的修改node
但升級到 vue-cli 3.x 以後,反而一臉懵逼。。。webpack
在踩了一天的坑以後,終於成功發佈了一個小插件,因而記個筆記git
1、調整項目結構github
首先用 vue-cli 建立一個 default 項目web
// 順便安利一篇文章《Vue 爬坑之路(十二)—— vue-cli 3.x 搭建項目》vue-cli
當前的項目目錄是這樣的:npm
首先須要建立一個 packages 目錄,用來存放組件json
而後將 src 目錄改成 examples 用做示例
2、修改配置
啓動項目的時候,默認入口文件是 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
3、開發組件
以前已經建立了一個 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
4、整合並導出組件
編輯 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
5、打包組件
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 命令,編譯組件
6、準備發佈
首先須要在 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*
7、發佈到 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
// 恬不知恥的求星星...