Compiler overview

The Compiler aspect provides a single interface for Component compilation, during development and during build. It enables you to use the same commands and APIs to compile any Component, regardless of the specific compiler it uses.

Specific compilers used by a Component (Babel, TypeScript, and so on) are set by the component's env.

Run the following to compile all your Workspace Components:

bit compile
Copied

The following output lists the compilation results in a single format:

STATUS        COMPONENT ID
✔ SUCCESS       apps/bit-dev
✔ SUCCESS       blocks/component/architecture-breakdown
✔ SUCCESS       blocks/footer
✔ SUCCESS       blocks/header
✔ SUCCESS       buttons/button
✔ SUCCESS       content/adding-components
Copied

To 'watch' Components for changes, and to auto-compile modified Components, run:

bit watch
Copied

The compiled code is written into each Component's corresponding package, in the node_modules directory of your workspace. For example, the compiled code for company.scope/ui/text will be found in the ./node_modules/@company/scope.ui.text/dist directory (inside your workspace).

To learn more about compilation in the Workspace, see Compiling during development.

Run the following to compile Components as part of the build pipeline (which prepares Components for distribution):

bit build
Copied

The output to the terminal details the specific compilers being used, as well as the Envs that use them:

...
✔ env "teambit.harmony/aspect", task "teambit.compilation/compiler:BabelCompiler (compile components for artifact dist)" has completed successfully in 363ms
✔ env "teambit.react/react", task "teambit.compilation/compiler:TSCompiler (compile components for artifact dist)" has completed successfully in 1s
✔ env "teambit.mdx/mdx", task "teambit.compilation/compiler:MDXCompiler (compile components)" has completed successfully in 879ms
...
the build has been completed. total: 19 tasks
Copied

The compiled code is written into the Component's Capsule. Run bit snap or bit tag to execute the build pipeline (as well as other pipelines), and have the compiled code persisted in the component version, and included in the component's package.

The Compiler aspect does not set specific compilation strategies as these are defined by the specific compilers themselves (and are often configurable by the Envs that use them).

However, all official Bit compilers are configured to favor dev experience when compiling during development, and to favor runtime performance and code universality, when compiling for distribution (during build).

For example, Bit's TypeScript compiler performs type-checking when compiling during build but skips it when compiling during development. This enables faster compilation and better dev experience.

To examine a Component's specific compiler config, run the following:

bit env get COMPONENT_ID
Copied

For example:

bit env get company.demo/ui/card
Copied

The output details the Component's env config which includes the compiler config:

Environment: teambit.react/react
...
teambit.compilation/compiler

configured compiler: teambit.typescript/typescript (TypeScript @ 4.4.2)
compiler config:
{
  "compilerOptions": {
    "lib": [
      "es2019",
      "DOM",
      "ES6",
      "DOM.Iterable"
    ],
    "target": "es2015",
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "outDir": "dist"
  },
  "exclude": [
    "dist"
  ]
}
Copied

Specific compilers are applied on Components via the Components' Envs. For example, the company.demo/ui/card Component examined earlier, is applied with the TypeScript compiler by its Env, the React Env.

To learn how to use a specific compiler, see 'Using compilers'.