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
          ├── ...
CopiedCopy

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
CopiedCopy

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

Watch for changes and recompile

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

bit watch
CopiedCopy

Watch starts by default when starting the Workspace UI.

bit start
CopiedCopy

CLI References