簡単にangglar.jsonファイルを言います.
8516 ワード
…
このような変化は主に
実際には、このようなモードの利点は、例えば、1つの会社が複数の管理プラットフォームまたは製品を持っている場合、このような方式を使って各プロジェクトの環境を統一することができ、各プロジェクト間で共有されるコンポーネントも統一的に維持され、すべてのプロジェクトの共用
しかし、ほとんどの人はまだ作業スペースでプロジェクトを維持していますので、ここでは重要ではなく、
この機能をサポートしているIDEやエディタであれば、
ここでの
各構成項目には3つのフィールド属性があります.
どう使いますか
たとえば、ローカルで実行されるサーバコマンドを追加でカスタマイズします.
もちろん、追加のコマンドライン構成を直接使用して、定義された構成をカバーすることもできます.
ここの例は単に
schema.json
実は私は自分の印象的な属性を記録するためだけに、
Angular CLI 6+のバージョンの後、元のangular-cli.jsonはangular.jsonに変更されましたが、中のフィールドの変化はかなり大きいです.基本的な構成が分からない場合、または古いバージョンのコードコードコードコードコードコードのcopyを新しいバージョンの作業空間に直接送ると、いくつかの友好的でないエラーが発生します.このような変化は主に
Angular CLIがmonorepo(1つの空間管理複数のプロジェクト)の開発モードを導入しているからであり、ng newを使用して出てきた大きな作業空間に相当する.angular.json構成によって様々なng generate application | libraryから出てきたプロジェクトまたはコンポーネントライブラリを管理する.実際には、このようなモードの利点は、例えば、1つの会社が複数の管理プラットフォームまたは製品を持っている場合、このような方式を使って各プロジェクトの環境を統一することができ、各プロジェクト間で共有されるコンポーネントも統一的に維持され、すべてのプロジェクトの共用
npmパッケージおよびtypescript配置されています.monorepo下で構成されている:しかし、ほとんどの人はまだ作業スペースでプロジェクトを維持していますので、ここでは重要ではなく、
jsonファイルの変更は新しいモードのためと言いたいだけです.Angular.jsonの部分フィールドng new作業空間がある場合、デフォルトはルートディレクトリでプロジェクトを作成し、e2eプロジェクトに対応します.初期のangular.json構造は以下の通りである(省略された部分の構成コード){
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"xxxx": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {}
}
},
"defaultProject": "xxxx"
}$schemaJSON Schemaファイルを指し、このファイルはangular.jsonのすべてのフィールドと制約を説明しています.この機能をサポートしているIDEやエディタであれば、
angular.jsonファイルを作成する際に、そのようなヒントが与えられます.versionバージョンを設定newProjectRoot新規プロジェクトの場所のパス.ng generate application | libraryを使用して新しいプロジェクトを作成すると、設定されたnewProjectRootディレクトリに自動的に組み立てられます.projectsすべての項目の配置を設定します.そのうちの一つは一つのサブ項目で、xxxxなどは一つの項目であり、作成時に自動的に生成される.{
"projects": {
"xxxx": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {}
}
}
}CLIに内蔵されたいくつかの命令を使用することができる.rootプロジェクトを代表する「ルートディレクトリ」、つまりプロジェクトの位置、またはプロジェクトのソースコードの父のカタログです.項目のルートディレクトリには特定の構成が含まれています.sourceRootプロジェクトのソースコードのディレクトリは、通常はsrcディレクトリを使用してデフォルトです.projectTypeこの項目を表示するのはapplicationですか?それともlibraryですか?prefixng generate component | directiveを使用してコンポーネントまたは命令を生成する際のデフォルトのselectorプレフィックスは、命令を使用して作成されたコンポーネントまたは命令は、一般的にapp-xxxフォーマットです.ここで手動で変更して、プロジェクト全体を有効にします.schematicsCLIにおいてコンポーネント、命令、モジュールなどのファイルを生成する命令は、@angular-devkit/schematicsを使用して実現されるものであり、これらの命令は、典型的には、コンポーネントを生成するためのいくつかの命令を含む.ng g c --spec=false --styleext=scss、このコマンドは、試験ファイルを持たない、scssをスタイルファイルのために使用するコンポーネントを直接生成することができる.これらの構成を手動で入力すると面倒になるので、angular.jsonは、いくつかの生成クラスを一括して設定するためのschematics属性を提供する.ここでの
schematicsは単一projectに対して来たものである.angular.json全体にもこのフィールドがあり、デフォルトはすべてのprojectに適用されます.CLIにはいくつかのオプションが用意されています.@schematics/angular:component @schematics/angular:class @schematics/angular:directive @schematics/angular:guard @schematics/angular:module @schematics/angular:pipe @schematics/angular:service componentを例に挙げて、統一ng g c --spec=false --styleext=scssの効果を実現するなら、以下のように構成することができる.{
"schematics": {
"@schematics/angular:component": {
"styleext": "less",
"spec": false
}
}
}ng g cを使用して生成することができる.architectいくつかのCLI関連のプロジェクト自動化命令構成が含まれています.例えば、ローカル運転、コンパイル、テストなどです.デフォルトでは、いくつかのコマンド構成が予め設定されています.例えば、build、serveなどです.{
"architect":{
"build":{},
"serve":{},
"extract-i18n":{},
"test":{},
"lint":{}
}
}各構成項目には3つのフィールド属性があります.
builder、options、configurations、たとえばデフォルトのbuildコマンド構成:{
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/testApp",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"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
}
}
}
}
}builderは実行する内蔵プログラムを表しています.CLIにはいくつかの自動化ツールが内蔵されています.architectはただ一つのfacadeモードを提供しています.optionsは、現在のbuilderに対して構成される構成項目を表し、異なる内蔵プログラムを呼び出し、対応する構成項目を転送する必要があるので、構成項目が多いので、ここにもリストされない.configurationsは、このコマンドの様々な呼び出しモードを表しています.この構成では、別名を定義して、異なる構成(構成のフィールドまたはoptionsの中)を使用して、最後にコマンドを使用する時に、手動で異なるモードを選択することができます.どう使いますか
CLIは、実はいくつかのショートカットコマンドを内蔵して、デフォルトで生成された構成に対応しています.例えば、ng serve、ng buildなどの追加的なカスタム構成であれば、ng run :[:configurations] [ ] コマンドを使用して実現できます.projectとarchitectは必須で、configurationsはオプションです.たとえば、ローカルで実行されるサーバコマンドを追加でカスタマイズします.
{
"architect":{
"myServe":{
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "xxxx:build",
"port": 8800
},
"configurations": {
"port1": {
"port": 8801
},
"port2": {
"port": 880
}
}
}
}
}build構成を使用して、カスタムの実行ポートを加えて、2つの異なるモードを加えて、異なるポートを実行します.ng run xxxx:myServeを使用して、ローカルサーバのプロジェクトを正常に実行することができます.ポートは8800を使用してng run xxxx:myServe:port1ポートを使用して8801です.もちろん、追加のコマンドライン構成を直接使用して、定義された構成をカバーすることもできます.
ここの例は単に
ng run xxxx:myServe:port1 --port=8808の使い方を簡単に理解するためです.architect標準項目は、いくつかのdefaultProjectコマンドを使用してプロジェクト名が指定されていない場合、デフォルトで指す項目です.schema.json
実は私は自分の印象的な属性を記録するためだけに、
CLI全体に他の多くのフィールドがあります.全面的に理解したいなら、angular.jsonが指すファイルを直接開いてもいいです.中には様々なフィールドのタイプ、配置、説明が詳しく展示されています.