5 lines
34 KiB
JSON
5 lines
34 KiB
JSON
|
{
|
||
|
|
"id": "guide/cli-builder",
|
||
|
|
"title": "Angular CLI builders",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/cli-builder.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"angular-cli-builders\">Angular CLI builders<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/cli-builder#angular-cli-builders\"><i class=\"material-icons\">link</i></a></h1>\n<p>A number of Angular CLI commands run a complex process on your code, such as linting, building, or testing.\nThe commands use an internal tool called Architect to run <em>CLI builders</em>, which apply another tool to accomplish the desired task.</p>\n<p>With Angular version 8, the CLI Builder API is stable and available to developers who want to customize the Angular CLI by adding or modifying commands. For example, you could supply a builder to perform an entirely new task, or to change which third-party tool is used by an existing command.</p>\n<p>This document explains how CLI builders integrate with the workspace configuration file, and shows how you can create your own builder.</p>\n<div class=\"alert is-helpful\">\n<p> You can find the code from the examples used here in <a href=\"https://github.com/mgechev/cli-builders-demo\">this GitHub repository</a>.</p>\n</div>\n<h2 id=\"cli-builders\">CLI builders<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/cli-builder#cli-builders\"><i class=\"material-icons\">link</i></a></h2>\n<p>The internal Architect tool delegates work to handler functions called <a href=\"guide/glossary#builder\"><em>builders</em></a>.\nA builder handler function receives two arguments; a set of input <code>options</code> (a JSON object), and a <code>context</code> (a <code>BuilderContext</code> object).</p>\n<p>The separation of concerns here is the same as with <a href=\"guide/glossary#schematic\">schematics</a>, which are used for other CLI commands that touch your code (such as <code>ng generate</code>).</p>\n<ul>\n<li>\n<p>The <code>options</code> object is provided by the CLI user, while the <code>context</code> object is provided by the CLI Builder API.</p>\n</li>\n<li>\n<p>In addition to the contextual information, the <code>context</code> object, which is an instance of the <code>BuilderContext</code>, also provides access to a scheduling method, <code>BuilderContext.scheduleTarget()</code>. The scheduler executes the builder handler function with a given <a href=\"guide/glossary#target\">target configuration</a>.</p>\n</li>\n</ul>\n<p>The builder handler function can be synchronous (return a value) or asynchronous (return a Promise), or it can watch and return multiple values (return an Observable).\nThe return value or values must always be of type <code>BuilderOutput</code>.\nThis object contains a Boolean <code>success</code> field and an optional <code>error</code> field that can contain an error message.</p>\n<p>Angular provides some builders that are used by the CLI for commands such as <code>ng build</code>, <code>ng test</code>, and <code>ng lint</code>.\nDefault target configurations for these and other built-in CLI builders can be found (and customized) in the \"architect\" section of the <a href=\"guide/workspace-config\">workspace configuration file</a>, <code>angular.json</code>.\nYou can also extend and customize Angular by creating your own builders, which you can run using the <a href=\"cli/run\"><code>ng run</code> CLI command</a>.</p>\n<h3 id=\"builder-project-structure\">Builder project structure<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/cli-builder#builder-project-structure\"><i class=\"material-icons\">link</i></a></h3>\n<p>A builder resides in a \"project\" folder that is similar in structure to an Angular workspace, with global configuration files at the top level, and more specific configuration
|
||
|
|
}
|