使用CLI 開發(fā)一個Vue 3.0的npm 庫
前言
前幾天寫了一個Vue的自定義右鍵菜單的npm庫，主要講了插件的設計思路以及具體的實現(xiàn)過程，插件的開發(fā)流程沒有細講。
本文就跟大家分享下如何使用CLI從零開始開發(fā)一個支持Vue3的庫，并上傳至npm，歡迎各位感興趣的開發(fā)者閱讀本文。
實現(xiàn)思路
根據(jù)Vue官方文檔中有關插件的介紹，我們開發(fā)的插件可以是公開install()方法的Object，也可以是工具類的function庫。
本文我們要開發(fā)的庫是需要向Vue添加一個自定義指令，屬于向Vue添加全局級功能，所以需要采用公開install方法。
庫開發(fā)完成后，就是需要打包上傳至npm庫了，打包這一塊可以選擇自己配webpack來搞，我選擇用Vue Cli提供的方案來進行打包，接下來就跟大家分享下整體的思路：
安裝Vue CLI，本文安裝的是4.x版本 使用 vue create [project-name]命令來創(chuàng)建一個項目，創(chuàng)建時選擇自定義配置。刪除默認創(chuàng)建的文件，配置依賴項 配置打包命令 配置CSS內(nèi)聯(lián) 添加庫描述 發(fā)布至npm
實現(xiàn)過程
接下來帶著大家動手操作下上述步驟。
安裝Vue CLi
在終端執(zhí)行下述命令：
yarn?global?add?@vue/cli
#?或者
npm?install?-g?@vue/cli
創(chuàng)建項目
在終端執(zhí)行下述命令，本文要創(chuàng)建的項目名為：vue-right-click-menu-next
vue?create?vue-right-click-menu-next
在接下來的步驟中，由于Vue3底層大部分代碼采用TypeScript編寫，因此他可以完美的支持TS，我們創(chuàng)建項目時就要考慮到使用我們插件的用戶啟用TS的情況，因此我們要勾上TypeScript，此處我勾選的選項為：vue3, node-sass, eslint+prettier, typescript，可以按照自己的需要去選。
配置依賴項
項目創(chuàng)建好后，我們刪掉CLI初始化時創(chuàng)建的東西，然后修改package.json中的內(nèi)容。
在package.json中，CLI默認是把vue和core-js放在dependencies下的，我們開發(fā)的插件是要給其他開發(fā)者引用的，如果我們打包的產(chǎn)物中包含Vue包的話可能會引發(fā)各種問題，比如用戶可能會在引入我們的包之后會在runtime時創(chuàng)建兩個不用的Vue實例，所以vue插件的package.json里一定不能將其放在dependencies中，而是要放在peerDependencies中，表明會從引用者的其他的包中引入相對應的包，而不會在這個包里直接引入。
在package.json中添加下述代碼，移除原來dependencies下的依賴。
?"peerDependencies":?{
????"core-js":?"^3.6.5",
????"vue":?"^3.0.0"
??}
在devDependencies中添加git提交規(guī)范相關依賴
{
????"@commitlint/cli":?"^11.0.0",
????"@commitlint/config-angular":?"^11.0.0",
????"commitizen":?"^4.2.2",
????"cz-conventional-changelog":?"^3.3.0",
????"husky":?"^4.3.0",
}
添加config和husky配置changelog生成地址和強制編輯器提交代碼走我們定義的規(guī)范
{
??"config":?{
????"commitizen":?{
??????"path":?"./node_modules/cz-conventional-changelog"
????}
??},
??"husky":?{
????"hooks":?{
??????"commit-msg":?"commitlint?-E?HUSKY_GIT_PARAMS"
????}
??}
}
最后，在script中添加提交命令與生成changelog的命令
{
????"changelog":?"conventional-changelog?-p?angular?-i?CHANGELOG.md?-s",
????"commit":?"git-cz"
}
配置打包命令
由文檔可知，可以通過vue-cli-service build --target lib --name myLib [entry]命令，將一個單獨的入口構(gòu)建為一個庫。
那么，我們就可以在package.json的script標簽里添加build命令用以執(zhí)行插件的打包，代碼如下。
vueRightMenuPlugin 打包后的文件名 src/main.ts 插件的入口文件
{
??"build":?"vue-cli-service?build?--target?lib?--name?vueRightMenuPlugin?src/main.ts",
}
由于我們的插件啟用了typescript，使用它的默認打包，不會幫我們生成ts聲明文件，使用我們插件的開發(fā)者項目可能會啟用typescript，在引用插件時就會報錯聲明文件不存在，因此我們需要額外做下述操作：
在 tsconfig.jsonz中添加下述代碼，打包時在項目的指定位置自動生成配置文件。
{
????"declaration":?true,//?是否生成聲明文件
????"declarationDir":?"dist/lib",//?聲明文件打包的位置
}
創(chuàng)建 vue.config.js文件，關閉并行打包的一些相關配置。
module.exports?=?{
??chainWebpack:?config?=>?{
????if?(process.env.NODE_ENV?===?"production")?{
??????config.module.rule("ts").uses.delete("cache-loader");
??????config.module
????????.rule("ts")
????????.use("ts-loader")
????????.loader("ts-loader")
????????.tap(opts?=>?{
??????????opts.transpileOnly?=?false;
??????????opts.happyPackMode?=?false;
??????????return?opts;
????????});
????}
??},
??parallel:?false
};
做完上述操作后，我們運行打包命令時就能自動生成聲明文件了。
配置CSS內(nèi)聯(lián)
當我把插件開發(fā)完，測試時發(fā)現(xiàn)我引用的組件樣式丟了，找了好久問題，最后在CLI的文檔中找到了問題所在，他有個css.extract屬性，它使用來配置打包時是否將css樣式提取到獨立的文件中，Default: 生產(chǎn)環(huán)境下是 true，開發(fā)環(huán)境下是 false，我們打包時他默認是true，用戶需要單獨引入這個樣式文件文件。
我們可以通過手動將其設置為false，讓其在打包時使用內(nèi)聯(lián)樣式，這樣就能解決樣式失效的問題了，我們在vue.config.js中加入下述代碼。
module.exports?=?{
??//?強制css內(nèi)聯(lián)
??css:?{?extract:?false?}
}
添加庫描述
做完上述操作，我們跟打包有關的相關的配置就弄好了，接下來我們在package.json中添加庫的相關描述，讓npm可以正確識別我們的插件。
name 插件名稱 version 版本號 description 插件簡述 private 是否私有 main 庫的入口文件位置(打包后的入口文件) types 庫的聲明文件位置 publisher 庫發(fā)布者 repository 倉庫信息 keywords 關鍵詞，在npm找包時所匹配的關鍵詞 author 庫作者 license 庫遵守的開源協(xié)議 bugs bug反饋地址 homepage 庫主頁
{
??"name":?"vue-right-click-menu-next",
??"version":?"1.0.0",
??"description":?"支持vue3的右鍵菜單插件",
??"private":?false,
??"main":?"dist/vueRightMenuPlugin.common.js",
??"types":?"dist/lib/main.d.ts",
??"publisher":?"[email protected]",
??"repository":?{
????"type":?"git",
????"url":?"git+https://github.com/likaia/vue-right-click-menu-next.git"
??},
??"keywords":?[
????"vuejs",
????"vue3",
????"vue",
????"rightMenu",
????"右鍵菜單",
????"vueRightMenu"
??],
??"author":?"likaia",
??"license":?"MIT",
??"bugs":?{
????"url":?"https://github.com/likaia/vue-right-click-menu-next/issues"
??},
??"homepage":?"https://github.com/likaia/vue-right-click-menu-next#readme",
}
發(fā)布至npm
至此，我們插件的整個環(huán)境就搭建好了，可以著手與插件的實現(xiàn)了，對本文實現(xiàn)的插件感興趣的開發(fā)者可移步至我的另一篇文章：使用vue封裝右鍵菜單插件
插件開發(fā)完成后，我們就可以進行打包并發(fā)布至npm倉庫了。
打包
#?打包
yarn?run?build
發(fā)布
npm?publish?--access?public
插件發(fā)布成功：vue-right-click-menu-next
本文中開發(fā)的插件代碼地址：vue-right-click-menu | vue-right-click-menu-next)
在線體驗地址：chat-system
??看完三件事
如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我三個小忙：
點贊，讓更多的人也能看到介紹內(nèi)容（收藏不點贊，都是耍流氓-_-） 關注公眾號“前端勸退師”，不定期分享原創(chuàng)知識。 也看看其他文章
勸退師個人微信：huab119
也可以來我的GitHub博客里拿所有文章的源文件：
前端勸退指南：https：//github.com/roger-hiro/BlogFN一起玩耍呀