A build pipeline is a sequence of tasks that are executed when a component is built or snapped.
Your env sets its components with a series of build tasks. These tasks are then included into a series of core build tasks, that are common to all components.
Run the following to execute the build pipeline:
Run the following to execute the snap pipeline (which includes the build pipeline):
Run the following to execute the tag pipeline (which includes the build pipeline):
Run the following to review a component's pipelines:
The output will be similar to the following. Note that this list of tasks include core tasks like CoreExporter
, and tasks that were registered by the env, such as TypescriptCompiler
.
teambit.pipelines/builder
build pipe
total 9 tasks are configured to be executed in the following order
1. teambit.harmony/aspect:CoreExporter
2. teambit.compilation/compiler:TypescriptCompile
3. teambit.defender/tester:JestTest
4. teambit.defender/linter:EsLintLint
...
10. teambit.preview/preview:GeneratePreview
snap pipe
total 6 tasks are configured to be executed in the following order
...
tag pipe
total 6 tasks are configured to be executed in the following order
...
Build artifacts
Most build tasks generate artifacts. Learn how to retrieve and handle the generated artifacts in Build artifacts.
Env services, such as 'compiler', 'tester', 'linter', and so on, run in the workspace, when a component is being developed.
They can be executed manually by using the corresponding commands (e.g, bit compile
), or automatically when running Bit's development server (bit start
).
Build tasks, on the other hand, run in a capsule, a directory isolated from the workspace. They are executed when a component is built or snapped (bit build
, bit snap
or bit tag
).
Most development tools provide an env service and a corresponding build task. For example, 'Typescript' provides the compiler env service and the typescript build task.
// @filename: my-react-env-env.bit-env.ts // ... import { Compiler } from '@teambit/compiler'; import { TypescriptCompiler } from '@teambit/typescript.typescript-compiler'; import typescript from 'typescript'; export class MyReactEnv extends ReactEnv { compiler(): EnvHandler<Compiler> { return TypescriptCompiler.from({ tsconfig: require.resolve('./config/tsconfig.json'), types: resolveTypes(__dirname, ['./types']), typescript, }); } } export default new MyReactEnv();
Preview service
An exception to the service/build-task pattern above is the 'preview' service. 'Preview' is part of Bit's core build tasks. It runs for every component, when it is built or snapped. To learn more see
Component previews().The following example replaces the default TypescriptCompiler
task with the same task, but with a different configuration.
// @filename: my-react-env-env.bit-env.ts // ... import { resolveTypes, TypescriptTask, } from '@teambit/typescript.typescript-compiler'; import typescript from 'typescript'; export class MyReactEnv extends ReactEnv { build() { /* replace the default TypescriptCompiler task with a new one, that uses a different config */ return super.build().replace([ TypescriptTask.from({ typescript, tsconfig: require.resolve('./config/new-tsconfig.json'), types: resolveTypes(__dirname, ['./types']), }), ]); } } export default new MyReactEnv();
Verify your pipelines were modified properly by reviewing the component's pipelines.
By default, the React env only registers tasks to the build pipeline.
However, you can register your own tasks to a new snap and tag pipelines, as well.The following code snippet adds a task to React-env's default build pipeline.
import { ReactEnv } from '@teambit/react.react-env'; /* import the task you want to add */ import { ComponentNameTask } from '@learnbit/extending-bit.build-tasks.component-name'; export class MyReactEnv extends ReactEnv { name = 'my-react-env-env'; build() { /* add your task to the build pipeline */ return super.build().add([ComponentNameTask.from({})]); } } export default new MyReactEnv();
To learn how to create a custom task, see Create a build task.
To remove a task from a pipeline, use the remove()
method in the relevant pipeline ('build', 'snap' or 'tag'). Get the task name from the component's list of build tasks.
// @filename: my-react-env-env.bit-env.ts // ... export class MyReactEnv extends ReactEnv { name = 'my-react-env-env'; build() { return super.build().remove('JestTask'); } } export default new MyReactEnv();