Edit

Javascript Guidelines

Bit is a generic platform that can use with Javascript (as well as ES6) code that encapsulate specific functionality. This section adds Javascript specific best practices on top of Bit's general Best Practices.

The guide is appropriate to use with components that are not library specific. This may be NodeJS code or utility functions used in different frameworks.

Note: Try the Bit for NodeJS tutorial.

Compilers

To transpile ES6+ code use the Babel compiler.
If you need babel version 6, you can revert to the compiler's v6.0.1.

bit import bit.envs/compilers/babel --compiler

To bundle es6 code use the webpack bundler. The configuration used in this bundler is visible here.

Changing Compiler Configuration

To change the configuration of a compiler, here are the recommended steps to follow:

• Create a new directory and an empty workspace in it
• Import the compiler you want to modify, but without the --compiler flag
• Modify the .babelrc file of the compiler to fit your needs
• Tag and export the new version of the component to your own scope

Now, in your project configuration (package.json or bit.json), change the default compiler to be the new component. Run bit status to see that all components properly built. You may also change it to a specific components using overrides

Testers

You can use the following testers for plain vanilla code:

• Mocha tester
• Jest tester

To use those testers run:

bit import bit.envs/testers/mocha --testers

Use Path aliases

To avoid backward references as suggested in the best practices, use absolute paths for imports. Use the following according to your environment needs:

• Webpack resolve
• tsconfig resolving
• Babel module resolver
• NODE_PATH environment variable

Ensure Bit Components are Exposed via a Single Entry Point

Each shared component should have a single entry point which is the root file of the component. Add a top-level index.js file that will expose all of the component’s APIs, e.g. by re-exporting them from the internal file.
This practice reduces coupling between components as one component does not need to be aware of the internal file structure of another component. Specifically, if the component is bundled (e.g. UMD format) the internal files will not be available.

Handling Assets and Styles

Refer to the general guidelines on how to handle assets and styles.