quokka搭配webpack設定

quokka是一個測試工具,支援蠻多的編輯器,可以直接即時的就看到結果,所以大部分都是開發或是測試的時候可以拿出來使用

在使用webpack作為打包編譯的工具的時候,有一些設定會讓quokka看不懂,這邊就來介紹一下怎麼設定

alias

在專案中通常會加上alias的設定,這樣可以讓import比較乾淨,大概會像是這樣設定

1
2
3
4
5
6
7
8
9
10
module.exports = () => {
return {
//...
resolve: {
alias: {
'@app': resolve(__dirname, './app')
}
},
};
}

那在程式中通常會這樣寫

1
import api from '@app/services/api';

但是這個時候使用quokka會告訴你找不到這個module,根據官方的文件可以透過設定.quokka的檔案(json format),來讓工具看的懂

without babel

alias有兩種方法,一個是有babel,當然另一種就是沒有,這兩個都有寫好的套件可以使用
首先介紹一下沒有babel的情況下要使用alias-quokka-plugin

1
yarn add --save --dev alias-quokka-plugin

再來就是把.quokka的檔案產生好

1
2
3
4
5
6
{
"plugins": ["alias-quokka-plugin"],
"alias": {
"@app": "./app",
}
}

設定完以後就不用怕啦,開始使用在程式裡面吧

1
const api = require('@app/services/api');

with babel

有使用babel的話,我們要安裝另一個套件babel-alias-quokka-plugin

1
yarn add --save --dev babel-alias-quokka-plugin

改一下.quokka檔案的內容

1
2
3
4
5
6
7
8
9
{
"babel": true,
"plugins": [
"babel-alias-quokka-plugin"
],
"alias":{
"@app":"./app"
}
}

可以看到這邊主要多了一個設定叫做babel,那預設會載入.babelrc並且env是test,當然你也可以特別指定env之類的,但我是全部都交給babelrc就好,.quokka只做最基本的設定

global variable

很開心的設定完上面的步驟,一按下去執行,🤬又有錯誤,這次是**__CLIENT__**找不到,突然想到在webpack中有定義了一些屬於全域型的變數

1
2
3
4
// in webpack.config.js
new webpack.DefinePlugin({
__CLIENT: true,
});

自定plugin

這時候我們就要採用自訂plugin的方式,宣告一個變數讓quokka看懂,這時候就先產生一個quokkaPlugin.js的檔案

1
global.__CLIENT__ = true;

.quokka的設定中,把這個檔案當做plugin放進去

1
2
3
4
5
6
7
8
9
10
{
"babel": true,
"plugins": [
"./quokkaPlugin.js",
"babel-alias-quokka-plugin"
],
"alias":{
"@app":"./app"
}
}

結論

終於設定完畢,可以正常的使用quokka這個工具,如果你的import很多的話,可能會使用到Pro的版本,可以先看一下官方的差異介紹,試用後再決定要不要買

如果你是有套用完整的測試框架像是jest或是protractor,就要改使用wallaby,絕對可以讓你享受到TDD的紅綠燈開發方式

再設定上面如果有一些問題的話可以去參考官方的repo,裡面有非常多種的範例