Set Up a Compiler

You can use the compiler of your choice, and the required configuration as part of your dev environment:

TypeScript

Babel

Multi compiler

Looking for another compiler? Learn how to create your own component compiler.

Use a compiler

For example, the following configuration defines the Babel compiler as the compiler to use during development and during build. Note that a single env can use different compilers or compiler configuration for development and build.

Install the compiler in your workspace:

$bit install @teambit/compilation.babel-compiler

Copied

Set the compiler in the relevant env:

/* @filename: my-env.bit-env.ts */

import { NodeEnv } from '@teambit/node.node';
import { Compiler } from '@teambit/compiler';
import { EnvHandler } from '@teambit/envs';
import { Pipeline } from '@teambit/builder';
import { BabelCompiler, BabelTask } from '@teambit/compilation.babel-compiler';

export class MyBabelEnv extends NodeEnv {
  name = 'my-env';

  /**
   * the path to the babel config file.
   */
  protected babelConfigPath = require.resolve('./config/babel.config.json');

  compiler(): EnvHandler<Compiler> {
    /**
     * use babel for compilation during development (in the workspace)
     * executed on 'bit compile', 'bit start', 'bit watch'
     */
    return BabelCompiler.from({
      babelConfig: this.babelConfigPath,
    });
  }

  build() {
    return Pipeline.from([
      /**
       * use babel for compilation during build (in a capsule)
       * executed on 'bit build', 'bit snap', 'bit tag'
       */
      BabelTask.from({
        babelConfig: this.babelConfigPath,
      }),
    ]);
  }
}

export default new MyBabelEnv();
Copied