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.

Compiling during development

Run the following to compile all your Workspace Components:

bit compile
CopiedCopy

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
CopiedCopy

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

bit watch
CopiedCopy

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.

Compiling during build

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

bit build
CopiedCopy

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
CopiedCopy

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.

Compilation strategies and standards

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
CopiedCopy

For example:

bit env get company.demo/ui/card
CopiedCopy

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"
  ]
}
CopiedCopy

Setting a Component with a specific compiler

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'.