nx/packages/angular/docs/browser-esbuild-examples.md
2024-01-26 10:43:16 -05:00

67 lines
1.7 KiB
Markdown

The `@nx/angular:browser-esbuild` executor is very similar to the `@angular-devkit/build-angular:browser-esbuild` builder provided by the Angular CLI. It builds an Angular application using [esbuild](https://esbuild.github.io/).
In addition to the features provided by the Angular CLI builder, the `@nx/angular:browser-esbuild` executor also supports the following:
- Providing esbuild plugins
- Incremental builds
## Examples
{% tabs %}
{% tab label="Providing esbuild plugins" %}
The executor accepts a `plugins` option that allows you to provide esbuild plugins that will be used when building your application. It allows providing a path to a plugin file or an object with a `path` and `options` property to provide options to the plugin.
```json {% fileName="apps/my-app/project.json" highlightLines=["8-16"] %}
{
...
"targets": {
"build": {
"executor": "@nx/angular:browser-esbuild",
"options": {
...
"plugins": [
"apps/my-app/plugins/plugin1.js",
{
"path": "apps/my-app/plugins/plugin2.js",
"options": {
"someOption": "some value"
}
}
]
}
}
...
}
}
```
```ts {% fileName="apps/my-app/plugins/plugin1.js" %}
const plugin1 = {
name: 'plugin1',
setup(build) {
const options = build.initialOptions;
options.define.PLUGIN1_TEXT = '"Value was provided at build time"';
},
};
module.exports = plugin1;
```
```ts {% fileName="apps/my-app/plugins/plugin2.js" %}
function plugin2({ someOption }) {
return {
name: 'plugin2',
setup(build) {
const options = build.initialOptions;
options.define.PLUGIN2_TEXT = JSON.stringify(someOption);
},
};
}
module.exports = plugin2;
```
{% /tab %}
{% /tabs %}