前言

工作中多個(gè)項(xiàng)目用到了同一個(gè)組件，每次修復(fù)bug或者增加新功能后都需要同步更新每個(gè)項(xiàng)目的代碼，然后想到可以通過(guò)發(fā)布成npm包的形式來(lái)實(shí)現(xiàn)代碼統(tǒng)一。此文以蘋(píng)果電腦為例，如果是windows系統(tǒng)，可能略有差別。

一、環(huán)境準(zhǔn)備

1.首先最基本的需要安裝nodejs，版本推薦 v10 以上，因?yàn)樾枰惭bvue-cli

2.安裝vue-cli

npm install -g @vue/cli

可能會(huì)報(bào)錯(cuò)，如下：

這是因?yàn)闆](méi)有權(quán)限，重新執(zhí)行如下命令：

sudo npm install -g @vue/cli

輸入密碼，按回車(chē)即可

二、初始化項(xiàng)目

1.構(gòu)建項(xiàng)目

vue create vue-link-demo

這里可以選擇vue2或者vue3，我這里選擇的vue3

構(gòu)建完成后的目錄如下：

2.開(kāi)發(fā)組件/加入組件

可以將已經(jīng)編寫(xiě)好的組件移動(dòng)到components目錄下，或者新建一個(gè)vue組件，步驟是一樣的。

例如我這里新建了一個(gè)HelloWorld.vue組件，需要注意的是，組件必須有name，這將會(huì)是用戶使用的組件名稱

然后修改App.vue

運(yùn)行項(xiàng)目npm run serve，可以看到正常運(yùn)行

最后一步，增加在src文件夾下新建index.js文件

// src/index.js
import HellowWorld from '@/components/HellowWorld.vue';
 
// 將引入的組件模塊存儲(chǔ)，如果是組件庫(kù)，則在這里引入多個(gè)組件即可
const components = [ HellowWorld ];
 
const install = (Vue,options) => {
  if (install.installed) return;
  install.installed = true
  components.forEach(component => {
  // 這里可以看出，為什么上文強(qiáng)調(diào)組件必須有name
    Vue.component(component.name, component)
  })
}
// 如果是直接引入的vue.js方式，則會(huì)掛到window下
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
export default {
  // 使用Vue.use必須具有install方法
  // https://cn.vuejs.org/v2/api/#Vue-use
  install,
  ...components
}

3. 修改配置文件

將項(xiàng)目根目錄下的package.json文件：

1. scripts修改start和build命令：

```c
"scripts": {
    "serve": "vue-cli-service serve",
    "start": "vue-cli-service build --target lib --name vue-link-demo --dest lib src/index.js --watch",
    "build": "vue-cli-service build --target lib --name vue-link-demo --dest lib src/index.js",
    "build:app": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

這里的–target lib是 vue-cli 自帶的打包命令，此命令會(huì)將入口文件打包成一個(gè)庫(kù)碼，具體可參考官網(wǎng)說(shuō)明vue-cli官方文檔–name 指的是打包后的文件名
–dest 指文件夾的名稱

緊跟的src/index.js 指的是執(zhí)行上文新建的index文件，暴露install方法

執(zhí)行命令

npm run start

執(zhí)行成功之后會(huì)在項(xiàng)目根目錄增加lib文件夾：

如果組件庫(kù)過(guò)大，可能會(huì)報(bào)錯(cuò):allocation failure scavenge might not succeed?？梢酝ㄟ^(guò)關(guān)閉內(nèi)聯(lián)css(下文有介紹)或者修改--max_old_space_size=10000（可自行百度）嘗試解決

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 為false則強(qiáng)制內(nèi)聯(lián)，區(qū)別是最終lib文件夾中不會(huì)生成單獨(dú)的css文件
  // 設(shè)置為true，則不會(huì)內(nèi)聯(lián)css,最紅lib文件如上圖會(huì)有單獨(dú)的css文件生成，用戶使用組件包時(shí)需要在main.js中手動(dòng)引入：import 'vue-libs-demo/lib/vue-libs-demo.css'
  css: { extract: true }
})

• 修改package.json文件中main配置項(xiàng)——外部訪問(wèn)項(xiàng)目包的入口文件；

// 最終lib文件夾生成的umd.js
"main": "lib/vue-link-demo.umd.js"

三、調(diào)試

1、執(zhí)行打包命令

// 開(kāi)發(fā)環(huán)境執(zhí)行
npm run start 
// 正式發(fā)布執(zhí)行 npm run build

2、發(fā)布本地連接包

npm link

3、測(cè)試項(xiàng)目

按上面構(gòu)建項(xiàng)目的步驟重新新建一個(gè)項(xiàng)目用于測(cè)試（或者用隨便一個(gè)就項(xiàng)目都行），然后在測(cè)試項(xiàng)目的目錄終端執(zhí)行

npm link vue-link-demo

然后修改測(cè)試項(xiàng)目的main.js:

import olMap from 'ol-map-vue'
import 'ol-map-vue/lib/ol-map.css'
const app = createApp(App)
app.use(olMap)
app.mount('#app')
// 如果為vue2寫(xiě)法略有不同哦

在App.vue中使用：

<template>
  <div class="container">
    <HelloWorld msg="測(cè)試組件" />
  </div>
</template>

然后運(yùn)行項(xiàng)目

npm run serve

四、發(fā)布使用

測(cè)試沒(méi)問(wèn)題后就可以發(fā)布到nodejs了

1、注冊(cè)

注冊(cè)npm賬號(hào) 點(diǎn)擊注冊(cè)

2、本地登陸

按步驟注冊(cè)完成以后，打開(kāi)命令行工具，并定位到項(xiàng)目目錄
中間會(huì)需要輸入用戶名、密碼、郵箱、郵箱驗(yàn)證碼

如果中間出錯(cuò)的話，可能是由于設(shè)置了淘寶鏡像，重新設(shè)置一下即可：

npm config set registry https://registry.npmjs.org/

3、發(fā)布

執(zhí)行命令

npm publish

顯示正在發(fā)布中。
可能會(huì)報(bào)錯(cuò)如下，是由于命名沖突了：

驗(yàn)證是否是由于命名問(wèn)題導(dǎo)致的，可以執(zhí)行命令：

npm view react

果不其然，修改名稱即可。修改完后重新發(fā)布npm publish

最后一行出現(xiàn) +包名@版本號(hào) 即表示發(fā)布成功了
登陸npmjs，可以看到發(fā)布成功了。

4.使用

在測(cè)試項(xiàng)目中卸載連接包

npm unlink vue-link-demo

然后安裝發(fā)布成功的包

npm install vue-link-demo --save

最后運(yùn)行

npm run serve

可以正確顯示即表示成功。
中間可能會(huì)出現(xiàn)一些問(wèn)題，但是如果按照文章的步驟來(lái)，流程應(yīng)該是沒(méi)錯(cuò)的，可以排查一下代碼錯(cuò)誤。

到此這篇關(guān)于vue組件發(fā)布成npm包的文章就介紹到這了,更多相關(guān)vue發(fā)布成npm包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論