概述
@angular-devkit/architect 是 Angular 框架中的一个 npm 包，它提供了一套可插拔的架构，用于构建和运行 Angular 应用程序。使用 @angular-devkit/architect，您可以轻松管理和配置您的项目构建和开发任务，将其转化为可重用的任务和工作流程。本文将介绍如何使用 @angular-devkit/architect 完成一些常见的开发任务。
安装
在开始之前，您需要全局安装 @angular/cli：
npm install -g @angular/cli
安装 @angular-devkit/architect：
npm install @angular-devkit/architect
配置
@angular-devkit/architect 的配置文件是 angular.json。在该文件中，您可以定义开发任务以及它们的输入和输出。下面是一个简单的配置文件示例：
-- -------------------- ---- -------
-
---------- --
----------- -
--------- -
------- ---
------------- ------
------------ -
-------- -
---------- ----------------------------------------
---------- -
------------- --------------
-------- -----------------
------- --------------
------------ -------------------
----------- --------------------
--------- -
------------------
------------
--
--------- -
----------------
--
---------- --
--
----------------- -
------------- -
------------------- -
-
---------- ----------------------------------
------- --------------------------------------
-
--
--------------- -----
---------------- ------
------------ ------
------------- -----
-------------- ------
------ -----
------------------ -----
-------------- ------
----------------- ----
-
-
-
-
-
-
-在该配置文件中，我们定义了一个 my-app 项目，其中有一个 build 开发任务。该任务将使用 @angular-devkit/build-angular:browser 构建器来编译和打包该项目，然后输出到 dist/my-app 目录中。
运行任务
要运行开发任务，您可以使用 ng run 命令：
ng run my-app:build
执行此命令将使用 angular.json 中定义的 build 开发任务。
开发自定义任务
除了使用 @angular-devkit/build-angular 提供的构建器之外，您还可以开发自己的自定义任务，以满足特定的项目开发需求。下面是一个简单的示例 - 我们将开发一个 echo 任务，它将输出指定的消息：
-- -------------------- ---- -------
-- ---------------
------ - --------------- -------------- ------------- - ---- ----------------------------
------ - ---------- - ---- -------
------ - ---------- - ---- -----------------------
------ --------- ----------- ------- ---------- -
-------- -------
-
------ -------- ------------------- ------------ -------- ---------------- ------------------------- -
-----------------------------
------ --- ------------------------------------ -- -
--------------- -------- ---- ---
--------------------
---
-
------ ------- --------------------------该任务使用 createBuilder 方法创建一个可执行任务，并使用 runBuilder 方法处理输入和输出。要在 angular.json 中使用该任务，您需要将它添加到 builders 属性中：
-- -------------------- ---- -------
-
------- ---------
------- ---
------------- ------
------------ -
------- -
---------- --------------------
---------- -
---------- ------ ------
-
-
-
-在完成上述操作后，您可以使用 ng run 命令运行 echo 任务：
ng run my-app:echo
总结
在本文中，我们介绍了如何使用 @angular-devkit/architect 完成一些常见的开发任务。使用 @angular-devkit/architect，您可以轻松地管理和配置您的项目构建和开发任务，将其转化为可重用的任务和工作流程。本文提供了一些示例代码和配置信息，以帮助您开始使用 @angular-devkit/architect。对于更高级的使用方法，请参阅官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/193709