angular.json常用参数注释

本文详细解释了AngularCLI的工作空间配置,包括构建过程(如浏览器构建、生产优化)、开发服务器设置、测试用例(Karma与Protractor)、以及不同环境下的配置选项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json", //angular-cli.json规则文件
  "version": 1, // 指明了Angular 工作空间 概要的版本。
  "newProjectRoot": "projects",//定义了由CLI创建的新的内部应用和库放置的位置。默认值为`projects`
  "projects": {  //包含了工作空间中所有项目的配置信息。
    "angularTest": {  //项目配置详情(项目名称)
      "root": "", //指定了项目文件的根文件夹,可能为空,但是它指定了一个特定的文件夹。
      "sourceRoot": "src",//指定了项目源文件位置
      "projectType": "application",//表明了 项目的状态 是 `appliaction`还是`library`。
      "prefix": "app",//当CLI创建 `component`或者`directive`时,使用该属性来区别他们。组件selector默认前缀
      "schematics": {},
      "architect": {//自定义自动化命令
        "build": { //build模块配置
          "builder": "@angular-devkit/build-angular:browser",//build执行的自动化程序
          "options": {
            "outputPath": "dist/angularTest",//编译后的输出目录,默认为dist
            "index": "src/index.html", //指定首页文件,默认值为"index.html"
            "main": "src/main.ts", //指定应用的入门文件
            "polyfills": "src/polyfills.ts",// 指定polyfill文件
            "tsConfig": "src/tsconfig.app.json",//指定tsconfig文件
            "assets": [ //记录资源文件夹,构建时复制到`outDir`指定的目录
              "src/favicon.ico",//网站ico图标
              "src/assets"
            ],
            "styles": [//引入全局样式,构建时会打包进来,常用于第三方库引用样式
              "src/styles.css"
            ],
            "scripts": [ ]// 引入全局脚本,构建时会打包进来,常用语第三方库引入的脚本
          },
          "configurations": {//代表这个命令的多种调用模式 
            "production": {//打包命令-–prod()的配置
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {//serve模块配置
          "builder": "@angular-devkit/build-angular:dev-server",//serve执行的自动化程序
          "options": {
            "browserTarget": "angularTest:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angularTest:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angularTest:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "angularTest-e2e": { //项目测试详细配置
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "angularTest:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "angularTest:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "angularTest"//当使用CLI命令时,`defaultProject`代表显示的名字。
}


### application.json 文件概述 `application.json` 是一种常见的 JSON 配置文件,通常用于定义应用程序的全局配置、环境变量或其他运行时参数。尽管其具体用途可能因框架或工具的不同而有所差异,但总体来说,它的主要功能包括以下几个方面: #### 1. **应用级配置** `application.json` 可以用来存储应用程序的核心配置信息,类似于 SAP Fiori 中的 `manifest.json`[^1] 或 Angular 的 `project.json`[^2]。这些配置可能涉及: - 数据源连接字符串 - API 密钥或认证令牌 - 日志级别设置 - 缓存策略 示例代码如下: ```json { "dataSource": "http://example.com/api", "apiKey": "your_api_key_here", "logLevel": "DEBUG" } ``` #### 2. **多环境支持** 许多现代框架允许通过不同的 `application.json` 文件来管理不同环境下的配置(如开发、测试和生产)。例如,在 Spring Boot 中,可以通过 `application-dev.json`, `application-prod.json` 等命名约定实现这一目的。 这种做法的好处在于能够轻松切换配置而不需修改核心代码逻辑。 #### 3. **微服务架构中的角色** 在分布式系统中,`application.json` 常被用作服务间通信的基础配置文件。它可以指定消息队列地址、数据库端口以及其他依赖的服务位置。 #### 4. **前端与后端交互** 对于某些前后端分离的应用程序,`application.json` 可能会被用来定义接口文档或者默认请求头信息。这有助于统一团队成员对 RESTful 接口的理解并减少沟通成本。 --- ### 技术细节与最佳实践 - **可读性和维护性**: 使用清晰的键名结构,并考虑加入注释说明重要字段含义(虽然标准JSON不支持注释,但是可以用额外的方式记录). - **安全性考量**: 敏感数据不应该硬编码到任何提交至版本控制系统(VCS)里的`.json`里;而是应该利用环境变量或者其他安全机制替代. - **模块化设计**: 如果单个文件变得过于庞大复杂,则应将其拆分为多个子文件夹内的独立部分再组合起来使用. --- ### 实际应用场景举例 假设我们正在构建一个基于 Node.js Express 框架的小型 Web 应用程序: ```javascript const fs = require('fs'); const path = require('path'); // 加载 configuration file. let rawdata = fs.readFileSync(path.join(__dirname,'./config/application.json')); let config = JSON.parse(rawdata); console.log(`Application is running with database at ${config.database.url}`); ``` 这里展示了如何动态加载外部 json 来控制内部行为模式的例子. ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值