Compiling during development

During development, Bit compiles your components using the bit compile and bit watch commands. This commands are providing a standard dev experience for compiling any kind of Component, whether it is a NodeJS modules, a React component or anything else.

Compilation of components in the Workspace is optimized for dev experience, performance and debugging by default.

This means Source Maps are generated and components are just transpiled (without types) into in the node_modules directory to ensure consistency between using a component for development or consumption purposes.

note

For type resolution in the Workspace we rely on the Workspace Component Links which symlinks the source code from within the link to the corresponding Component Directory.

├── node_modules
    ├── @my-org
        ├── ui.button
          ├── dist
              ├── index.js
              ├── index.js.map
              ├── button.js
              ├── button.js.map
          ├── ...
Copied

Compile all components in the workspace

Bit allows to compile all components in the Workspace regardless to the configured Env and therefore Compiler with a single command.

bit compile
Copied

Compile with a verbose output

Using the --verbose flag you can easily which files got generated for each component and where they were persisted.

bit compile --verbose
Copied

✔ SUCCESS    aspect-docs/variants:
         - /Users/my-user/Bit/docs/node_modules/@teambit/workspace.aspect-docs.variants/dist/index.js
         - /Users/my-user/Bit/docs/node_modules/@teambit/workspace.aspect-docs.variants/dist/index.js.map
         - /Users/my-user/Bit/docs/node_modules/@teambit/workspace.aspect-docs.variants/dist/variants.composition.js
         - /Users/my-user/Bit/docs/node_modules/@teambit/workspace.aspect-docs.variants/dist/variants.composition.js.map
         - /Users/my-user/Bit/docs/node_modules/@teambit/workspace.aspect-docs.variants/dist/variants.docs.mdx
         - /Users/my-user/Bit/docs/node_modules/@teambit/workspace.aspect-docs.variants/dist/variants.mdx.js
         - /Users/my-user/Bit/docs/node_modules/@teambit/workspace.aspect-docs.variants/dist/variants.mdx.js.map

✔ SUCCESS   aspect-docs/yarn:
         - /Users/my-user/Bit/docs/node_modules/@teambit/dependencies.aspect-docs.yarn/dist/index.js
         - /Users/my-user/Bit/docs/node_modules/@teambit/dependencies.aspect-docs.yarn/dist/index.js.map
         - /Users/my-user/Bit/docs/node_modules/@teambit/dependencies.aspect-docs.yarn/dist/yarn.composition.js
         - /Users/my-user/Bit/docs/node_modules/@teambit/dependencies.aspect-docs.yarn/dist/yarn.composition.js.map
         - /Users/my-user/Bit/docs/node_modules/@teambit/dependencies.aspect-docs.yarn/dist/yarn.docs.mdx
         - /Users/my-user/Bit/docs/node_modules/@teambit/dependencies.aspect-docs.yarn/dist/yarn.mdx.js
         - /Users/my-user/Bit/docs/node_modules/@teambit/dependencies.aspect-docs.yarn/dist/yarn.mdx.js.map


✔ 20/20 components compiled successfully.
Copied

Watch for changes and recompile

Watching for component changes and recompiling can be done with a single command.

bit watch
Copied

Watch starts by default when starting the Workspace UI.

bit start
Copied

Compiling during development

note

Compile all components in the workspace

Compile with a verbose output

Watch for changes and recompile

CLI References