文章大綱
看標題好像很難懂我到底想幹嘛,搞這麼麻煩幹什麼XD
因為公司的業務是有一套遊戲是用vue做的,然後幫客戶架設這個遊戲在他們的主機,換上 logo 和網址,就可以營業了。有點類似經銷我們的遊戲給客戶營業。
因為遊戲內容都一樣,我不可能遊戲更新後,我再去所有客戶那邊把程式碼再全部貼上一次。
可是我又不想把主程式用npm publish
推上去給人家下載,我只是公司自己要用而已。
期望是有一個主遊戲程式,定期維護更新,然後有新客戶就新增一個空白專案,裡面放logo圖檔和網址的環境變數,再下載主遊戲程式的最新版本;這樣遊戲有調整,其他客戶只要更新到最新版本就可以了。
首先我們會有兩個專案:
- 客戶的環境 ( 以下簡稱 Client )
- 遊戲主程式 ( 以下簡稱 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"
}
發表評論
想要加入討論嗎?請盡情發表您的想法!