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
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);