在vue專案中不發佈上npm,直接引入另一個本地專案的檔案

看標題好像很難懂我到底想幹嘛,搞這麼麻煩幹什麼XD

因為公司的業務是有一套遊戲是用vue做的,然後幫客戶架設這個遊戲在他們的主機,換上 logo 和網址,就可以營業了。有點類似經銷我們的遊戲給客戶營業。

因為遊戲內容都一樣,我不可能遊戲更新後,我再去所有客戶那邊把程式碼再全部貼上一次。

可是我又不想把主程式用npm publish推上去給人家下載,我只是公司自己要用而已。

期望是有一個主遊戲程式,定期維護更新,然後有新客戶就新增一個空白專案,裡面放logo圖檔和網址的環境變數,再下載主遊戲程式的最新版本;這樣遊戲有調整,其他客戶只要更新到最新版本就可以了。

只要更新主程式,其他的repo只要重新 yarn install 就可以拿到新的版本的主程式。

首先我們會有兩個專案:

  1. 客戶的環境 ( 以下簡稱 Client )
  2. 遊戲主程式 ( 以下簡稱 Game)

 

Client 環境安裝主程式

因為 Game 是不想公開的原始碼,所以我並沒有推上 npm。

package.json裡面的dependencies貼上主程式的名稱,你可以自己取,反正他就是你在 Client 專案中的代稱。

後面的地方就直接貼上你 github 或 gitlab 的 clone 連結。

{
  "dependencies": {
    //...
    "game-main": "https://gitlab.com/***/game-main.git",
  },
}

貼上之後直接在 Client 安裝

$ yarn

 

設定路徑別名 alias

除了你在package.json那邊可以指定 package 名稱之外,也可以在vue.config.js裡面取別名,並且分得更細。

先看一下config寫法:

const path = require("path");

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      "@G",
      path.join(__dirname, "node_modules/game-main/src"),
    );
  },
};

注意:這是vue cli 4的寫法,其他版本的cli寫法請參照官網。

原本呼叫組件的方式如下:

import Button from "game-main/src/components";

就可以改成:

import Button from "@G/components";

 

babel loader 也要幫忙編譯 Game

當我們把 Game 的一些內容引用進來的時候,會發現一些 Babel 的編譯上的錯誤,因為預設的 Babel 編譯會略過node_modules,所以我要把我剛剛安裝的game-main加進去受編譯的範圍。

const path = require("path");

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      "@G",
      path.join(__dirname, "node_modules/game-main/src"),
    );

    //... 加入下面這坨
    config.module
      .rule("compile")
      .test(/\.js$/)
      .include.add(__dirname + "src")
      .add(__dirname + "/node_modules/game-main/src")
      .end()
      .use("babel")
      .loader("babel-loader");

  },
};

 

全局使用的 sass loader 使用 Game 的路徑

如果你想全局使用 Game 的 scss 檔案像是variables.scss,路徑也可以使用 alias。

module.exports = {

  // ... 下面的路徑都加上G
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "~@G/scss/variables.scss";
                      @import "~@G/scss/element-variables.scss";
                      @import "~@G/scss/utils/media.scss";
        `,
      },
    },
  },

};

 

如果你在 Game 那邊有改東西,請記得傳上遠端,Client 這邊重新安裝時,請記得清除快取:

$ yarn cache clean game-main

當然你在 Game 可能會有各種版本號的 tag

所以package.json那邊也可以指定安裝的版本號:#字號後面補上tag名稱

{
  "dependencies": {
    //...
    "game-main": "https://gitlab.com/***/game-main.git#1.0.0",
  },
}

 

Game建立開發環境

到目前為止,我們可以把所有檔案都使用@G引入,並且在 Client 端yarn serve跑起來,只要定期下載最新版的 Game 就可以了。

現在 Game 裡面的檔案間互相引用也都是使用@G,這是因為他是整個原始碼直接引入 Clinet,我們就必須以 Client 的角度來看待檔案位置。

但問題是,如果我現在要改Game的內容,我難道改一點就要推上去github然後再到 Client 下載最新版,才能測試嗎?

這樣真的太麻煩了,所以我要把 Game 也建立一個開發環境。

當我在 Game 下yarn serve的時候,他就會跟我說找不到@G下的某某某檔案,因此我們要重新定義 Game 中的@G在哪裏?

答案就是自己的src

在 Game 中新增檔案vue.config.js

const path = require("path");

module.exports = {
  publicPath: "./",
  chainWebpack: config => {
    config.resolve.alias.set("@G", path.join(__dirname, "src"));
  },
};

如果你在 Client 那邊有使用環境變數.env檔案,記得也要一起搬過來喔。


在這邊可能會遇到一個小問題,就是你在 Client 使用docekr build的時候,他會告訴你沒有 Game 倉庫的權限,你有幾種方法:

使用帳號密碼

"dependencies": {
  "game-main": "https://[username]:[password]@gitlab.com/xxxx/xxx.git"
}

 

新增 gitlab 的 deploy token

Settings –> Repostory –> Deploy token 註冊一個read_repository的,然後

"dependencies": {
  "game-main": "https://[username]:[deploy_key]@gitlab.com/xxxx/xxx.git"
}

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。