quokka搭配webpack設定

Frontend, Testing
9 mins.
  1. 1. alias
    1. 1.1. without babel
    2. 1.2. with babel
  2. 2. global variable
    1. 2.1. 自定plugin
  3. 3. 結論
Testing Quokka

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，裡面有非常多種的範例

prev： next：