关于angular:Angular工作区配置-angularjson参数配置详解以及多项目配置

57次阅读

共计 4544 个字符，预计需要花费 12 分钟才能阅读完成。

Angular 工作区指的是由 Angular CLI 创立的利用或库，如果你的我的项目蕴含一些子项目能够在angular.json 的 projects 外面配置多个我的项目

JSON 的总体构造

下列属性位于文件的顶层，用于配置工作区。CLI 在工作区级的默认设置能够被我的项目级的设置所笼罩，而我的项目级的设置能够被命令行中的设置所笼罩。

  • $schema：用于验证 JSON 数据格式
  • version：该配置文件的版本（留神非我的项目版本）。
  • newProjectRoot：用来创立新工程的地位，当应用 ng generate application/library 创立新的我的项目时，会主动放到该目录下
  • defaultProject：默认值为用户执行 ng new projectName 时候的 projectName 的名称
    如果工作区存在多我的项目，defaultProject 最好指定一下，不然在每个我的项目 ng serve 或 ng build 的时候须要指定项目名称 ng serve --project=projectName

  • projects：对于工作区中的每个我的项目（利用或库）的配置项，key 为我的项目的名称，value 为具体的配置项。通过 ng new projectName 命令创立的初始利用会列在 projects 目录下

    "projects": {
  "projectName": {...}
  ...
}

PROJECTS- 我的项目配置选项

每个我的项目的 projects:<project_name> 下都有以下顶层配置属性。

"projects": {
  "projectName1": {"root": "","sourceRoot":"src","projectType":"application","prefix":"app","schematics": {},"architect": {}},
  "projectName2": {...}
}
  • root：我的项目的根文件夹，绝对于工作区文件夹的门路。初始利用的值为空，因为它位于工作区的顶层。
  • sourceRoot：该我的项目源文件的根文件夹
  • projectType："application" 或 "library" ，application 能够在浏览器中独立运行，而 library 则不行，library 是一个能够供很多利用共享的模块
  • prefix：组件或指令的前缀。能够自定义它，以作为利用或功能区的标识。
  • architect：我的项目构建器的配置选项

  • schematics：用于定制 ng generate 子命令的默认选项, 例如：

    "schematics": {
   "@schematics/angular:component": {
      "style": "scss",
      "changeDetection": "OnPush"
   },
   "@schematics/angular:directive": {"skipTests": true}
}

    示意执行 ng generate component 创立的组件默认应用 scss 为 css 语言, 应用 OnPush 作为检测策略。执行 ng generate directive 的时候不创立 spec 文件，也能够通过命令加上 ng generate directive --skipTests=true 实现。

Architect 配置选项

外面配置的是自动化命令，执行 ng run 命令能够运行一些预约义指标，并能够定义本人的指标

"architect": {"build": {},
  "serve": { },
  "e2e" : { },
  "test": { },
  "lint": { },
  "extract-i18n": { },
  "server": { },
  "app-shell": {}}
  • architect/build 为 ng build 命令的选项配置默认值
  • architect/serve 会笼罩构建默认值，并为 ng serve 命令提供额定的服务器默认值。除了 ng build 命令的可用选项之外，还减少了与开发服务器无关的选项。
  • 就以以上两个为例，具体请参考 https://angular.cn/guide/work…

每个构建指标都具备下列属性：

  • builder：用于构建此指标的构建工具的 npm 包。默认ng build 为 @angular-devkit/build-angular:browser, ng serve 为 @angular-devkit/build-angular:dev-server

  • options：针对以后 builder 所须要的配置项，不同的构件工具会有不同的配置, 默认选项如下：

    "options": {
  "outputPath": "dist/projectName", // 打包后输入文件门路
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "tsconfig.app.json",
  "aot": true, // 是否 aot 编译
  "assets": [ // 动态资源门路
    "src/favicon.ico",
    "src/assets"
    // 也能够蕴含一个对象
    {
       "glob": "**/*", // 通配符以 input 门路作为基准
       "input": "src/assets/", // 或者 "./node_modules/some-package/images"
       "output": "/assets/",
       "ignore": ["**/*.svg"], // 要排除的 glob 列表
    }
  ],
  "styles": [ // 引入的 css 门路，如果想引入 bootstrap 能够在这里引入 css
    "src/styles.scss",
    // 也能够是对象
    {
      "input": "src/external-module/styles.scss",
      "inject": false,  // 是否注入到 index.html
      "bundleName": "external-module" // 命名捆绑包
    }
  ],
  "scripts": [], // 引入的 js 门路，jquery 能够这里引入, 和 styles 一样也能够蕴含一个对象
  "stylePreprocessorOptions": {
     "includePaths": ["src/style-paths/variables.scss"]
  },
  // 能够从我的项目中的任何地位导入 variables.scss，而无需相对路径：// 之前 @import '../style-paths/variables'; 当初 @import 'variables';
  "customWebpackConfig": {"path": "./webpack.config.js" // 扩大 webpack 脚本，当初能够在 webpack.config.js 中开发 webpack},
  "allowedCommonJsDependencies": ["lodash"]
  // 如果 Angular CLI 检测到你的浏览器端利用依赖了 CommonJS 模块，就会收回正告。要禁用这些正告，你能够把这些 CommonJS 模块的名字增加到 allowedCommonJsDependencies
}

    options 也能够是这样

    "options": {"browserTarget": "projectName:build"}

    有了 browserTarget 属性，其余的都不须要啦，如果在 projects > projectName > architect > serve > options 中加上这个则示意我应用 projects > projectName > architect > build> options 中的配置，就是说如果 build 和 serve 配置是一样的只须要加上这个，不须要再从新定义配置了

  • configurations：可用于设置指标不同环境的配置项, 例如：

    "configurations": {"dev": {},
  "quality" : {},
  "preprod" : {},
  "product" : {}}

    如果你在 build 上面的 configurations 设置了多个环境，执行 ng build 须加上 --configuration=product/dev/preprod 指定环境
    每个环境咱们又能够进行如下设置：

    "fileReplacements": [
   {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.product.ts" 
      // 这里能够指定不同环境我的项目中不同的配置，例如能够定义 baseUrl
   }
],
"optimization": true, // 能够是布尔值或对象
"outputHashing": "all", // 打包文件加上 hash 值
"sourceMap": false, // 生成 sourceMap 文件，会使打包变慢能够是布尔值或对象
"extractCss": true, // 从全局款式中将 css 提取到 css 文件而不是 js 文件中。"namedChunks": false,  // 应用 chunkName 来替换 chunkId, 放弃缓存的能力
"extractLicenses": true, // 用于治理第三方插件的许可协定，将所有许可证提取到一个独自的文件中
"vendorChunk": false, // 是否拆散第三方插件
"buildOptimizer": true, // 是否优化编译器
"budgets": [
   {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
   },
   {
      "type": "anyComponentStyle",
      "maximumWarning": "6kb",
      "maximumError": "10kb"
   }
]

    也能够这样

    "configurations": {
   "dev": {"browserTarget": "upgrade:build:dev"// 同以上 browserTarget 用法}
}

    budgets 详解

    • type：有效值为：bundle（特定包的大小），initial（利用的初始大小），allScript（所有脚本的总大小），all（整个利用的总大小），anyComponentStyle（任何一个组件款式文件的大小）。anyScript（任何一个脚本的大小），any（任何一个文件的大小）。
    • name：要限度的包的名字（当 type=bundle 时）。
    • baseline：一个示意基准大小的绝对值，用做比例值的基数。
    • maximumWarning：当大小超过基线的这个阈值百分比或具体的大小时给出正告。
    • maximumError：当大小超过基线的这个阈值百分比或具体的大小时报错。
    • minimumWarning：当大小小于基线的这个阈值百分比或具体的大小时给出正告。
    • minimumError：当大小小于基线的这个阈值百分比或具体的大小时报错。
    • warning：当大小达到或小于基线的这个阈值百分比时都给出正告。
    • error：当大小达到或小于基线的这个阈值百分比时都报错。

以上是我对 angular.json 的参数的一些了解和分享，如有不对的中央欢送斧正和探讨。码字不易如果感觉写得不错，留下赞再走呗

正文完
angular
发表至： angular
2021-07-08
 0
关于angular:angular学习之通俗易懂篇新建组件并调用
angular中delaydebounceTime等时间相关操作符单元测试的一种方法
关于angular:微前端概述Micro-Frontends-以及相比单体应用微前端能带来什么好处
关于angular:异步验证器防抖的补充-以及-记录动态组件遇到的问题