項(xiàng)目場景

簡單介紹一下目前的項(xiàng)目場景，目前我們有三個(gè)vue工程，就是三個(gè)vue項(xiàng)目，但是每個(gè)項(xiàng)目都有自己的基礎(chǔ)組件庫，但是這些自己封裝的組件庫都一樣，都是CV過去的，但是現(xiàn)在產(chǎn)品不穩(wěn)定，這些基礎(chǔ)的組件庫可能會總改，那么問題就來了，我每次難道都要改三遍嗎？

那也太費(fèi)勁了，所以研究了一下如何在多個(gè)vue項(xiàng)目共用一套基礎(chǔ)建設(shè)的組件，這樣我就改一次就行了，不需要改很多次了。

npm簡介 

npm全稱是node package management,接觸過node知道，它是node的包管理工具,我們平時(shí)使用的npm install <安裝的包名>，都是那些作者把自己的項(xiàng)目發(fā)布到Npm上，你才能夠install安裝它，我們這個(gè)場景也可以，我把公共的組件抽出來弄成一個(gè)工程，完了發(fā)布到npm上，以后用的時(shí)候直接npm install就可以了。但是我放棄了這個(gè)選擇，因?yàn)槊看胃膭佣嫉酶陌姹局匦掳l(fā)布很麻煩。

npm文檔

但是這里要介紹一下發(fā)布npm包需要配什么東西，后面會需要這里的配置。

  "name": "pub-fe"
  "version": "0.1.1" //項(xiàng)目版本
  "description": "包描述" //這個(gè)包的描述
  "main": "src/main.js", //入口文件，默認(rèn)就是main.js
  "author": "wxs", //作者名字
  "repository": {  //npm去哪里拉去你的項(xiàng)目代碼（這個(gè)后面沒用上，）
     "type": "git",
     "url": "git+https://github.com/wangxueshun/pub-fe.git"
   }
``

具體配置

入口文件main.js

//main.js文件
import pubImp from "./packages/pubImp/index.js"
//先把公共組件放在這個(gè)數(shù)組里，這里舉列子就寫了一個(gè)，有多少個(gè)就在數(shù)組里放多少個(gè)
const components = [
  pubImp
];
//這里install方法主要是為了以后用vue.use()全局注冊組件，因?yàn)槭腔A(chǔ)組件以后肯定常用，這樣就不用每個(gè)頁面都import了,這里不明白的建議百度。
const install = function (Vue) {//這個(gè)Vue參數(shù)，在Vue調(diào)用install方法的時(shí)候會把Vue傳進(jìn)去
  //這里循環(huán)調(diào)用
  components.forEach(component => {
    component.install(Vue);
  });
};
export default {
  install
}

pubImp文件

我的公共組件工程的結(jié)構(gòu)

pubImp下的index.js文件

import myButton from './src/main.vue'
export default {
    install(Vue) {
        Vue.component("myButton", myButton)
    }
}

現(xiàn)在共用的包已經(jīng)寫好了，那么怎么樣才能在別的工程那樣直接引入到項(xiàng)目中呢？

npm link

在本地開發(fā)npm模塊的時(shí)候，我們可以使用npm link命令，將npm 模塊鏈接到對應(yīng)的運(yùn)行項(xiàng)目中去，方便地對模塊進(jìn)行調(diào)試和測試

1.先到我們的公共包pub-fe中執(zhí)行npm link

這時(shí)候我們的pub-fe這個(gè)文件會被連接到全局。

2.在需要pub-fe的地方引入它，執(zhí)行npm link pub-fe，我的項(xiàng)目是spp-fe所以我以這個(gè)為例子

這個(gè)時(shí)候pub-fe就會映射到spp-fe中的node_modules中，以快捷鍵的方式。

3.這個(gè)時(shí)候我們就可以跟引入別的第三方模塊一樣，引入我們的pub-fe.

使用npm link的又一點(diǎn)好處就是，你依賴的包有更新的時(shí)候，可以及時(shí)響應(yīng)，不像在npm上發(fā)布的包，每次想下載最新的包都得npm install一下。

探究

那么我這么引入會不會對打包有影響呢？讓我們來探究一下。

一、執(zhí)行npm run serve

我們看一下研發(fā)環(huán)境的打包方式會造成什么影響，我就直接上引入Pub-fe之后的打包圖片了。

可以看到打出來的包pub-fe里引入進(jìn)來了，它里面也會有一些node_modules和它的一些依賴文件，對包的體積影響還是有的，但是這個(gè)研發(fā)環(huán)境的打包，webpack對研發(fā)環(huán)境的打包方式跟生產(chǎn)環(huán)境的打包方式是不一樣的，所以這個(gè)體積大就大了，我所謂就自己用。

二、執(zhí)行npm run build 生產(chǎn)環(huán)境的打包方式

讓我們看看引入Pub-fe之后對打包的影響。

可以看到這次的pub-fe中依賴的node_modules跟我們的項(xiàng)目都服用上了，不像在研發(fā)環(huán)境中他倆是兩套node_modules，所以這個(gè)對生產(chǎn)環(huán)境的打包影響近乎為零。

拓展

你可以通過這種方式進(jìn)行多個(gè)工程共用同一個(gè)依賴，是最簡單的方式，但這只適合小的團(tuán)隊(duì)使用。

你還可以用npm install +路徑的方式 ，把需要依賴的項(xiàng)目裝到node_modules里，但感覺這種沒npm link好用，每次更新公共依賴的代碼，都需要install一下。

你還可以把公共依賴發(fā)到npm上，這個(gè)是最正規(guī)的，但是我覺得太麻煩，如果團(tuán)隊(duì)大的話這么做我覺得挺合適的。

你還可以用npm install +git網(wǎng)址的方式，npm install 支持http,https.等等的方式，這里建議去看一下我最上面提到的Npm官網(wǎng)。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論