為了擺脫咸魚的身份，我給自己定了一個開源項目的目標
於是抽空寫了一個 textarea，打算發布到 npm 的時候卻遇到了問題
之前用 vue-cli 2.x 的時候，打包配置項非常透明，可以很容易的修改
但升級到 vue-cli 3.x 之后，反而一臉懵逼。。。
在踩了一天的坑之后，終於成功發布了一個小插件，於是記個筆記
一、調整項目結構
首先用 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
// 恬不知恥的求星星...