首页 > 其他分享 >angular-devkit 中 build-angular 包的作用

angular-devkit 中 build-angular 包的作用

时间:2023-05-17 23:00:19浏览次数:33  
标签:代码 应用程序 devkit angular 打包 build

@angular-devkit/build-angular 是 Angular CLI 的一个开发包,主要用于构建和打包 Angular 应用程序。它提供了一组命令行工具和可重用的构建流程,用于自动化构建和部署 Angular 应用程序。下面我们将介绍 @angular-devkit/build-angular 的作用和主要功能。

作用

@angular-devkit/build-angular 的主要作用是自动化构建和打包 Angular 应用程序。它提供了一组命令行工具和可重用的构建流程,帮助开发者轻松地构建、测试和部署 Angular 应用程序。

具体来说,@angular-devkit/build-angular 可以帮助我们完成以下任务:

  1. 编译 TypeScript 代码:将 TypeScript 代码编译成 JavaScript 代码,以便在浏览器中运行。

  2. 打包应用程序:将应用程序的所有代码和资源打包成一个或多个 JavaScript 文件,以便在浏览器中加载。

  3. 优化打包文件:使用各种优化技术,如 Tree Shaking、代码压缩、代码混淆等,减小打包文件的体积,提高应用程序的性能。

  4. 部署应用程序:将打包好的应用程序部署到 Web 服务器或云平台上,以供用户访问。

主要功能

@angular-devkit/build-angular 的主要功能包括以下几个方面:

  1. 构建应用程序:使用 ng build 命令,可以构建应用程序,并将其打包成一组 JavaScript 文件。

  2. 运行测试用例:使用 ng test 命令,可以运行应用程序的测试用例,并生成测试报告。

  3. 生成代码文档:使用 ng doc 命令,可以生成应用程序的代码文档,以供开发者参考。

  4. 运行开发服务器:使用 ng serve 命令,可以启动一个开发服务器,并在浏览器中预览应用程序的效果。

  5. 优化打包文件:使用各种优化技术,如 Tree Shaking、代码压缩、代码混淆等,减小打包文件的体积,提高应用程序的性能。

  6. 部署应用程序:使用 ng deploy 命令,可以将打包好的应用程序部署到 Web 服务器或云平台上,以供用户访问。

除了上述功能外,@angular-devkit/build-angular 还提供了许多其他的功能,例如支持多语言、自定义主题等。此外,它还可以与其他开发包和插件配合使用,以实现更多的功能和定制化需求。

总结

@angular-devkit/build-angular 是 Angular 应用程序构建和打包的核心开发包。

标签:代码,应用程序,devkit,angular,打包,build
From: https://www.cnblogs.com/sap-jerry/p/17410605.html

相关文章

  • 什么是 Angular 应用的 browser Application bundles 和 server Application bundle
    我们在使用yarnrun启动Angular应用时,注意到browserApplication和serverApplicationbundle的生成:在Angular应用程序中,应用程序包含两个主要的部分:客户端应用程序和服务器应用程序。客户端应用程序是在Web浏览器中运行的Angular应用程序,而服务器应用程序是在服......
  • 什么是 Angular Ivy Partial compilation mode
    compilingwithAngularsourcesinIvypartialcompilationmode.AngularIvypartialcompilationmode是AngularIvy编译器的一种模式,它是为了优化Angular应用程序的性能而引入的。在这种模式下,编译器只会重新编译那些发生变化的部分,而不会重新编译整个应用程序。这种......
  • 第四周编程作业(一)-Building your Deep Neural Network: Step by Step
    BuildingyourDeepNeuralNetwork:StepbyStepWelcometoyourweek4assignment(part1of2)!Youhavepreviouslytraineda2-layerNeuralNetwork(withasinglehiddenlayer).Thisweek,youwillbuildadeepneuralnetwork,withasmanylayersasyou......
  • python:ERROR: Could not build wheels for wordcloud, which is required to install
    pycharm里无法下载,在下面下载出现问题 需要下载error里的文件https://www.lfd.uci.edu/~gohlke/pythonlibs/#wordcloud这个网站找。输入Python,看自己电脑是怎样的 下载文件后,放到对应位置,下载成功 ......
  • @Builder 注解的简单使用
    1、导语(可跳过)Java小白一枚,研读公司代码。发现实体类上加了@Builder、@NoArgsConstructor和@AllArgsConstructor。话不多说,上代码 2、实体类代码@Data@EqualsAndHashCode(callSuper=false)@Builder@AllArgsConstructor@NoArgsConstructor@ApiModel(value="TOrder对......
  • 使用 Angular Shortcut 导入 style 文件
    假设我们的Angular项目具有下列这个文件结构:在一个典型的Angular项目中,通常会有很多组件。每个组件都有自己的样式表(CSS、SCSS、LESS等)。Angular开发人员可能经常需要在组件中包含全局样式文件(特别是变量文件),比如上图的_variables.scss.在hello.component.scss里需要......
  • 什么是 Angular 的 banana-in-a-box detection 机制
    "banana-in-a-boxdetection"是一个Angular表单绑定的术语。在Angular应用中,表单绑定通常采用“双向绑定”的方式,即使用[(ngModel)]或[(value)]等语法实现数据的双向绑定。其中,"banana-in-a-box"表示[()]符号的形状,即一个圆括号和一个方括号相连。这种绑定方式的优点......
  • 关于 Angular 中的 AuthGuard
    Angular中的AuthGuard是一个路由守卫,它用于保护某些路由,只有当用户经过身份验证并具有访问权限时,才允许他们访问。AuthGuard通常与路由配置一起使用,以确保用户无法直接访问需要身份验证的页面。AuthGuard是一个Angular服务,可以使用以下命令来创建它:nggguardauth上面......
  • Angular ngZone 源码解析
    AngularngZone源码解析ngZone源码中有几个常用的方法,属性,这里做一个整理与总结Zone.js简介ZoneJs职责拦截异步任务的调度封装回调函数用于异常处理以及异步操作中zone的跟踪提供往zone中添加数据的方法提供上下文特定的最后一帧错误处理拦截阻塞方法Zone的底层异......
  • Unable to find Gradle tasks to build: [:]. Build mode: ASSEMBLE. Tests: None
    从Github上下载了一个项目,运行时报如下错误:UnabletofindGradletaskstobuild:[:].Buildmode:ASSEMBLE.Tests:None解决办法1、修改Gradle版本;2、项目中缺失setting.gradle文件,从其他项目中复制一份过来。   ......