Babel

The simplest way to configure Quokka to use Babel is to specify:

{
  "babel": true
}

in your Quokka configuration.

This configuration expects that you have a .babelrc file (or a "babel": {...} section in your package.json) in your project (or the global config folder), as well the babel-core and the used presets in the project’s node_modules.

If you want to use the same version of babel for all projects and scratch files outside of any project context, you may install babel-core and required presets into the global ~/.quokka/node_modules folder.

Environment

If you are using different environment settings in your .babelrc file (or the "babel": {...} section in your package.json), then you may need to pass the desired env setting so that the required presets/plugins are applied.

{
  "babel": {
    "env": "dev"
  }
}

(the default env value is test)

Babel path

If you have babel-core installed somewhere else, you may specify the path (absolute or relative to the project’s folder):

{
  "babel": {
    "path": "...babel-core"
  }
}

Babel polyfill

If you want to use babel-polyfill:

{
  "babel": {
    "polyfill": true
  }
}

Overriding babel settings

If you don’t have a .babelrc file (or a "babel": {...} section in your package.json) or want to completely override the settings in your .babelrc file (or the "babel": {...} section in your package.json), you may specify them in the babel configuration object:

{
  "babel": {
    "presets": ["es2015", "react"]
  }
}

Note that in this case the babel settings are only applied for the Quokka file compilation. The files that you import/require from your Quokka file will be compiled using .babelrc file (or "babel": {...} section in your package.json).

Overriding Babel Configuration File Location

If you are running a mono-repo or have a complex project structure and need to load your Babel configuration from a different location than Babel defaults (i.e. your project root .babelrc or babel.config.js) then you may specify Babel’s config loading options in your project’s Quokka configuration settings (either package.json or .quokka file). For example, your project .quokka file will look something like this:

{
  "babel": {
    "configFile": "./sub-directory/custom.babel.config.js"
  }
}

Please note that any Babel paths that you specify in your global config file will use your project folder as the root folder for resolution of relative paths.

Using Babel to compile TypeScript

If you want to use Babel to compile TypeScript files then an additional configuration option, ts is required to override Quokka’s default use of the TypeScript compiler. When using Babel to compile TypeScript files, Quokka will run your code using node instead of ts-node. An example configuration is shown below:

{
  "babel": {
    "ts": true,
    "plugins": ["@babel/plugin-transform-typescript"]
  }
}