乐趣区

关于前端:angular工作区配置

jiezi

当咱们应用 ng new test-app 时，会新建一个 angular 我的项目，其中蕴含一个名为 angular.json 的文件，这就是 Angular 我的项目的配置文件也就是 Angular 工作空间配置。

其中 projects： 对于工作区中的每个专案（利用或函式库）都会蕴含一个子分区，子分区中是每个专案的配置项。

ng 则是 Angular 的一个命令，该命令在运行时将读取 angular.json 配置文件。

比方以后咱们在写的就只有 web 这一项，然而智慧社区有 web,wechat,lib 三项，其中每一项都会包含以下几种配置

"test-app": {"root": "","sourceRoot":"src","projectType":"application","prefix":"app","schematics": {},"architect": {}}

其中 sourceRoot 定义了根资料夹，也就是 src 文件夹。

projectType定义了该专案的类型——利用或者函数库，利用能够在浏览器中独立执行，而函式库则不行。在智慧社区中,web,wechat就是application(利用)，library(函数库)。

prefix则作为 Angular 所产生的选择器的字首字串。能够自订它，以作为利用或功能区的标识。

architect为本专案的各个建构器指标配置预设值。

"architect": {"build": {},
  "serve": { },
  "test": { },
  "e2e" : { },
  "lint": { },
  "extract-i18n": { },
  "server": { },
  "app-shell": {}}

这些配置项就很清晰明了了，别离对应着：ng b,ng s,ng t 等等命令。

其中每一项之中又包含这些参数：builder,options,configurations
其中 options 蕴含建构选项的预设值，当没有指定命名的备用配置时应用。

builder 用于建构此指标的建构工具的 npm 套件

其中 options 中蕴含有以下两种参数须要咱们理解:
styles:蕴含一些要新增到专案全域性上下文中的款式档案。Angular CLI 声援 CSS 汇入和所有次要的 CSS 前处理器。

当咱们引入 bootstrap 或是引入 fortawesome 时不仅须要装置相应依赖，还要在此进行配置；
比方像这样：

"styles": [
    "./node_modules/bootstrap/dist/css/bootstrap.css",
    "./node_modules/@fortawesome/fontawesome-free/css/all.css",
    ],

scripts蕴含一些 JavaScript 指令码档案，用于新增到专案的全域性上下文中。和 styles 一样，在引入 iconfont 或是 bootstrap 时也须要进行配置。
比方：

"scripts": [
   "./node_modules/bootstrap/dist/js/bootstrap.min.js",
   "./src/assets/icon/iconfont.js"
   ]

configurations局部能够为指标命名并指定备用配置

Angular CLI 具备两种建构配置：production 和 development。预设状况下，ng build 命令应用 production 配置，该配置将利用许多建构优化，包含：

  • 打包档案
  • 最小化多余的空白
  • 删除正文和有效程式码
  • 重写程式码，以应用简短、凌乱的名称（最小化）

这应该也就是之前所说的打包后零碎主动进行的优化，也就造成了咱们在页面中点击查看源代码与咱们本人写的代码不同的起因。

其中对于更精密的优化配置参数为：optimization，此选项可对建构输入进行各种优化，包含：

  • 指令码和款式的最小化
  • 摇树优化
  • 打消死程式码
  • 内联要害 CSS
  • 字型内联

此外，值得一提的是在配置 fortawesome 或是 bootstrap 时只在 build 中进行配置，ng s 下就能够见到成果，猜想与

"options": {"browserTarget": "test-app:build"},

中的 browserTarget 无关，经查问 browserTarget 是将配置映射到构建指标的设置，Angular 默认 ng serve 中 options 和configurations与 ng build 雷同。

在此基础上又去查了一下 ng build 和 ng serve 的区别

ng build 构建应用程序并进行部署。

ng serve 构建、部署、服务并每次监督您的代码更改。如果在代码中发现任何更改，它会主动构建并提供该代码。

退出移动版