Using a compiler

You can use an Env extension to replace the (base) Env's default compiler with another compiler implementation.

For example, the following will create a React Env extension:

bit create react-env aspects/my-react
Copied

React Env uses the TypeScript aspect by default. To replace it with another Aspect, another compiler, override its getCompiler and getBuildPipe service handlers, for compilation in the workspace, as well as during build.

Make sure to add the new compiler task to the build pipeline, and not override it altogether. In the example below, the Env's default compilation task is filtered out from the Env's default build pipeline by selecting its aspectId property (which is equal to the Compiler aspect ID).

Set dependencies (using getDependencies) to support the compiler config. For instance, if this example's Babel compiler receives a config (babelConfig) that sets it to support React with TS compilation, it will naturally require additional dependencies like @babel/preset-react and @babel/preset-typescript, to be configured on every component using this Env (these dependencies will be installed in the components' Workspaces or Capsules).

In the Env's main runtime file (my-env.main.runtime.ts), implement the following:

import { MainRuntime } from '@teambit/cli';
import { ReactAspect, ReactMain } from '@teambit/react';
import { EnvsAspect, EnvsMain } from '@teambit/envs';
import { CompilerAspect } from '@teambit/compiler';
// Babel aspect is used as an example
import { BabelAspect, BabelMain } from '@teambit/babel';
import { babelConfig } from './babel/babel.config';
import { ExtReactAspect } from './ext-react.aspect';

export class ExtReactMain {
  static dependencies = [ReactAspect, EnvsAspect, BabelAspect];

  static runtime = MainRuntime;

  static async provider([react, envs, babel]: [
    ReactMain,
    EnvsMain,
    BabelMain
  ]) {
    const babelCompiler = babel.createCompiler({
      babelTransformOptions: babelConfig,
    });

    // Get React's build pipeline
    const basicBuildPipeline = react.reactEnv.getBuildPipe();
    // Filter out compilation build tasks
    const basicBuildPipelineWithoutCompilation = basicBuildPipeline.filter(
      (task) => task.aspectId !== CompilerAspect.id
    );

    const compilerBuildTask = [
      compiler.createTask('BabelCompiler', babelCompiler),
      ...basicBuildPipelineWithoutCompilation,
    ];

    const overrideObj = {
      getCompiler: () => babelCompiler,
      getBuildPipe: () => compilerBuildTask,
    };

    const compilerTransformer = envs.override(overrideObj);
    const newEnv = react.compose([compilerTransformer]);
    envs.registerEnv(newEnv);
    return new ExtReactMain();
  }
}

ExtReactAspect.addRuntime(ExtReactMain);
Copied