如何在 Quokka 使用 Optional Chaining ? | 點燈坊

Optional Chaining 是 ECMAScript 非常令人期待功能，目前已經在 Stage 3，透過 Babel 的 Plugin，我們可在 Quokka 提早測試 Optional Chaining。

Version

macOS Mojave 10.14.6
VS Code 1.38.1
Quokka 1.0.253
Babel/core 7.6.2
Babel/register 7.6.2
Babel/plugin-proposal-optional-chaining 7.6.0

Babel

Quokka 預設是使用 Node，要改成使用 Babel。

~/.quokka/config.json

{
  "babel": true
}

將 babel 設定為 true，表示改用 Babel。

$ yarn add @babel/core @babel/register

在 ~/.quokka 目錄下安裝 @babel/core 與 @babel/register。

$ yarn add @babel/plugin-proposal-optional-chaining

在 ~/.quokka 目錄下安裝 @babel/plugin-proposal-optional-chaining，此為 optional chaining 的 plugin。

~/.quokka/.babelrc

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

在 ~/.quokka 目錄新增 .babelrc，讓 Babel 知道 optional chaining plugin。

Preferences

在 VS Code 的 preference 下，將 Javascript > Validate: Enable 取消，因為目前 VS Code 還不認識 optional chaining 語法會報錯。

Quokka

Quokka 就可正式使用 optional chaining 了。

Conclusion

• Quokka 預設使用 Node，但只要改用 Babel 後，就可安裝不少 plugin，提早測試 ECMAScript 還在 stage 語法

Reference

Quokka, Global config file
Babel, Installation
Babel, @babel/plugin-proposal-optional-chaining