如何使用vue腳手架構(gòu)建庫(kù)并發(fā)布到npm？下面本篇文章給大家介紹一下基于vue腳手架構(gòu)建庫(kù)并發(fā)布到npm的方法。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)絡(luò)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、靖宇網(wǎng)站維護(hù)、網(wǎng)站推廣。

構(gòu)建庫(kù)的常見(jiàn)方法有兩種：一種是自己手動(dòng)構(gòu)建webpack庫(kù)打包，設(shè)置output為 library; 另一種是基于vue-cli3輸出庫(kù)資源包。我們采用第二種vue腳手架的方式構(gòu)建庫(kù)。

新增編譯庫(kù)命令

// package.json 
"scripts": {
    // ...
    "lib": "vue-cli-service build --target lib --name Step --dest dist packages/index.js"
}

// packages/index.js  默認(rèn)打包Step
import Step from '../steps/src/step';
Step.install = function(Vue) {
    Vue.component(Step.name, Step);
};
export default Step;

--name: 庫(kù)名稱。--target: 構(gòu)建目標(biāo)，默認(rèn)為應(yīng)用模式。這里修改為 lib 啟用庫(kù)模式。--dest: 輸出目錄，默認(rèn) dist。[entry]: 最后一個(gè)參數(shù)為入口文件，默認(rèn)為 src/App.vue。

更多詳細(xì)配置查看 ? vue腳手架官網(wǎng)

如果該庫(kù)依賴于其他庫(kù)，請(qǐng)?jiān)?code>vue.config.js配置 externals

// vue.config.js
module.exports = {
    configureWebpack:{
      externals: {
         vue: 'Vue',
         'vue-router':'VueRouter',
         axios: 'axios'
      }
    }
}

執(zhí)行 npm run lib就可以發(fā)現(xiàn)我們的庫(kù)被打包到了 根目錄的dist文件夾下。

添加 .npmignore 文件（可選）

和 .gitignore 的語(yǔ)法一樣，具體需要提交什么文件，看各自的實(shí)際情況

# 忽略目錄
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

配置npm庫(kù)信息

配置package.json文件，以發(fā)布庫(kù)文件。

{
  "name": "gis",
  "version": "1.2.5",
  "description": "基于 Vue 的庫(kù)文件",
  "main": "dist/gis.umd.min.js",
  "keyword": "vue gis",
  "private": false,
   "files": ["dist"],
  "license": "MIT"
 }

name: 包名，該名字是唯一的。可在 npm 官網(wǎng)搜索名字，如果存在則需換個(gè)名字。version: 版本號(hào)，每次發(fā)布至 npm 需要修改版本號(hào)，不能和歷史版本號(hào)相同。description: 描述。main: 入口文件，該字段需指向我們最終編譯后的包文件。keyword：關(guān)鍵字，以空格分離希望用戶最終搜索的詞。author：作者files: 要上傳的文件private：是否私有，需要修改為 false 才能發(fā)布到 npmlicense： 開(kāi)源協(xié)議dependencies： 依賴庫(kù)注意每次發(fā)布新的庫(kù)，需要更改版本號(hào)，規(guī)則如下：

"version": "1.2.5"主版本號(hào)為 1，次版本號(hào) 2，修訂號(hào) 5

主版本號(hào)（Major）：當(dāng)你做了不兼容的API修改次版本號(hào)（Minor）：當(dāng)你做了向下兼容的功能性新增修訂號(hào)（Patch）：當(dāng)你做了向下兼容的問(wèn)題修正登錄npm

首先設(shè)置登錄的npm鏡像地址

npm config set registry http://168.20.20.57.4873

然后在終端執(zhí)行登錄命令，輸入用戶名、密碼、郵箱即可登錄

npm login

接著發(fā)布庫(kù)資源到npm

npm publish

最后發(fā)布成功可到官網(wǎng)查看對(duì)應(yīng)的包并下載

npm install package_name

相關(guān)推薦：

2020年前端vue面試題大匯總（附答案）

vue教程推薦：2020最新的5個(gè)vue.js視頻教程精選

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程入門！！

網(wǎng)頁(yè)名稱：如何使用vue腳手架構(gòu)建庫(kù)并發(fā)布到npm？
文章出自：http://chinadenli.net/article28/cgecjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、ChatGPT、標(biāo)簽優(yōu)化、搜索引擎優(yōu)化、營(yíng)銷型網(wǎng)站建設(shè)、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)