Component dependency configuration enables you to modify the dependency graph of specific groups of components. This modification overrides Bit's auto-detection of dependencies, and the workspace dependency policy.
Component dependency configurations are set on components manually or programmatically, and may include packages, as well as components.
Run the following to set a component with a dependency:
Use the
deps
command alias for shorter commands (e.g,bit deps set apps/to-do classnames
)
The output notifies classnames@2.3.2
was added to the dependency graph of apps/to-do
. The specific package version defaults to the latest when no version is specified.
changed components
my-org.tasks-scope/apps/to-do
added packages
{
"classnames": "2.3.2
}
Note that setting a dependency makes it part of the component's dependency graph, regardless of whether it is actually being used by that component (unlike dependency policies, which only affect components that use the dependencies listed in the policies).
Multiple dependencies can be configured simultaneously by providing a list of packages, separated by spaces:
To add a dependency with a specific semver version or range, run the following:
Run the following to set a group of components with a dependency, using a glob pattern for component IDs:
The output lists the components affected by this dependency configuration:
changed components
teambit.design/content/carousel
teambit.design/content/collapsible-content
added packages
{
"lodash": "4.17.21
}
Note that the dependency configuration is temporarily written into the
.bitmap
file, but is removed from that file, and persisted in the component snap once the component is snapped.
Dev dependencies are dependencies that are used only during development. A dependency is defined as a 'dev dependency' if it's only used by the component's dev files (e.g, test files, documentation files, composition files, etc.).
In addition to that, a dependency can be configured as a dev dependency, regardless of the component files using it:
Run the following to verify the dependency was properly added:
The output lists the dependency as a dev dependency:
│ id │ my-org.tasks-scope/apps/to-do │
├───────────────────┼───────────────────────────────────────────────────────────┤
│ dev dependencies │ lodash@4.17.21------------------------- (package) │
└───────────────────┴───────────────────────────────────────────────────────────┘
Peer dependencies are dependencies that are expected to be included in a component's host application. Since peer dependencies play a special "public role" in an app, such as the medium of communication between modules or the app's global state, they are required to exist in just a single instance, a single version.
Run the following to verify the dependency was properly added:
The output lists the dependency as a dev dependency:
│ id │ my-org.tasks-scope/apps/to-do │
├───────────────────┼───────────────────────────────────────────────────────────┤
│ peer dependencies │ @material-ui/core@^4.0.0-------- (package) │
└───────────────────┴───────────────────────────────────────────────────────────┘
It is recommended to set peer dependencies via the components' env, for consistency across components of the same type.
Run the following to list all available updates:
The output lists all outdated (direct) external dependencies, as well as the workspace components using them. Select the components to update using the space key and execute the command using the return key.
○ @teambit/design.inputs.input-text (runtime) 0.0.2 ❯ 1.0.9 because of my-org.tasks-scope/apps/to-do@0.0.5
Run the following to remove a dependency from a component:
Select multiple components using a glob pattern to remove their dependencies:
Configure dependencies via envs to standardize component dependencies. That's especially useful when setting peer dependencies, like react
and react-dom
,
or when adding dependencies needed for the components' compilation, like @babel/runtime
.
Create a new env or extend an existing env (learn more in the docs for you env of choice). Implement the following method:
getDependencies(component: any): Promise<DependencyList>
For example:
import { DependenciesEnv } from '@teambit/envs'; export class MyEnv implements DependenciesEnv { // ... async getDependencies() { return { dependencies: { /* remove 'react' as a regular dependency */ react: '-', }, devDependencies: { '@types/react': '^16.9.43', '@babel/runtime': '7.19.0', }, peerDependencies: { react: '^16.18.0', 'react-dom': '^16.18.0', }, }; } }
Run the following to create an aspect:
Use the dependency resolver's API to set dependencies:
import { DependencyResolverAspect, DependencyResolverMain } from '@teambit/dependency-resolver'; export class MyAspect { static dependencies = [DependencyResolverAspect]; static provider([depResolver]: [DependencyResolverMain]) { dependencyResolver.registerDependenciesPolicies([ { dependencies: { classnames: '1.0.0' } } ]); return new MyAspect(); } } ...