programing

angular.json으로 구성을 확장하는 방법이 있습니까?

subpage 2023. 3. 25. 11:06
반응형

angular.json으로 구성을 확장하는 방법이 있습니까?

Angular 6 응용 프로그램을 빌드할 때 다음 두 가지를 동시에 지정해야 합니다.

  • 생산 또는 개발 구축의 경우
  • 사용하고 있는 로케일

의 마마 my에서는angular.json하다

"build": {
  ...
  "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
    },
    "pl": {
      "fileReplacements": [
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/pl.json"
        }
      ]
    },
    "en": {
      "fileReplacements": [
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/en.json"
        }
      ]
    }
  }
}

내가 ng build --configuration=en --configuration=productionConfiguration 'en,production' could not be found한 번에 지정할 수 있는 설정은 1개뿐이라는 것을 이해했습니다.

, ,, 령, 이를 만들어야 .en,pl,productionEn,productionPl설정을 지정합니다.가장 깨끗한 패턴은 아니지만, 나는 그것을 감수할 수 있다.

"build": {
  ...
  "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
    },
    "pl": {
      "fileReplacements": [
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/pl.json"
        }
      ]
    },
    "en": {
      "fileReplacements": [
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/en.json"
        }
      ]
    },
    "productionPl": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        },
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/pl.json"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true
    },
    "productionEn": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        },
        {
          "replace": "src/assets/i18n/translations.json",
          "with": "src/assets/i18n/en.json"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true
    }
  }
}

저는 다 해서 붙이고 살 수가 요.production을 「」로 합니다.productionEn ★★★★★★★★★★★★★★★★★」productionPl로케일을 더 추가하거나 빌드 중에 지정하고 싶은 세 번째 측면을 추가하면 이 패턴은 유지하기가 매우 어렵습니다.안타깝게도 Angular 팀이 문서에서 권장하는 패턴인 것 같습니다.

에 Angular CLI를 요?productionEn를 확장하다production같은 설정 코드를 여러 번 복제하지 않도록 하기 위해?다음과 같이 합니다.

"build": {
  ...
  "configurations": {
    "production": {
      (...)
    },
    "pl": {
      "extends": "production",
      (...)
    },
    "en": {
      "extends": "production",
      (...)
    }
  }
}

마지막으로 명령줄에서 여러 구성을 지정하는 방법이 있습니다.

ng build --configuration=en,production

Angular repo 관련 문제

:--prod됩니다.--configuration (가나다)를 붙여야 .production설정 리스트에 명시적으로 액세스 할 수 있습니다.

각도 문서:--configuration=configuration:

angular.json의 "구성" 섹션에 지정된 명명된 빌드 대상입니다.이름이 지정된 각 대상에는 해당 대상의 옵션 기본값 구성이 함께 제공됩니다.이를 명시적으로 설정하면 "--prod" 플래그가 재정의됩니다.

에일리어스: -c

업데이트: 여러 구성을 사용한 구축에 대한 승인된 답변을 참조하십시오.아래 세부 정보는 이제 구식입니다.

angular.json 「서류」라고 기재되어 .options의 

"architect": {
        "build": {          
          "options": {...}

은, 「이것보다 한다」로 덮어씁니다.partial에서 된 옵션configurations. Angular CLI 워크스페이스 Wiki에서 다음 작업을 수행합니다.

configurations (object): A map of alternative target options.
configurationName (object): Partial options override for this builder.

이 문제의 코멘트에서는, 다음의 사용도 언급하고 있습니다.configurations

경우 the the the the the the the the the the the the the에 추가할 수 있는 처럼 들립니다.options에서 이동)production,productionPloptions: {}하고 나서, 「」를 합니다.fileReplacements 몇 도 있습니다

주의: 아직 테스트하지 않았습니다.이것은 문서와 문제에 근거한 제안일 뿐입니다.

근데 이건 안 돼ng serve뭐라고?

예를 들어 다음과 같습니다.

먼저, 다음 구성입니다.angular12/architect/build/configurations:

"development": {

    "customWebpackConfig": {
       "path": "custom-webpack.dev.config.js",
       "replaceDuplicatePlugins": true
    },

    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "extractLicenses": false,
    "sourceMap": false,
    "namedChunks": true,
    "aot": true
},

"quick": {

    "fileReplacements": [
        {
            "replace": "src/app/app-routing.module.ts",
            "with": "src/app/app-routing.module.quick.ts"
        }
    ]
}

표준 개발 Configuration을 사용하고 있습니다.또한 다음과 같은 설정이 추가되었습니다.quick이 옵션과 함께 설정해 두고 싶은 것이 있습니다.development.

(그래서 나의quickOP와 동일en그리고.pl.)

죄송합니다. 이것은 마법의 새로운 '퀵 앵글 빌드' 기능이 아닙니다(!) - 저는 단순히 제 기능을 복사했습니다.app-routing현재 사용하고 있는 모듈을 제외한 모든 레이지 모듈을 코멘트 아웃하여fileReplacements옵션을 지정하여 표준 파일을 덮어씁니다.대규모 프로젝트에서는 구축 속도가 대폭 향상됩니다.물론 실수로 이 시스템을 도입하고 싶지 않았기 때문에 별도의 구성이 필요했습니다.

달리기를 하면 어떻게 됩니까?ng serve --configuration development,quick는, 설정의 서비스 부분을 참조하는 것입니다(예:보다시피 나는 덧붙였다.quick위의 내용을 참조하여 브라우저 타깃으로 사용합니다.

"serve": 
{
    "builder": "@angular-builders/custom-webpack:dev-server",

    "options": {
       "browserTarget": "angular12:build"
    },

    "configurations": 
    {
       "production": {
          "browserTarget": "angular12:build:production"
       },
       "development": {
          "browserTarget": "angular12:build:development"
       },
       "quick": {
          "browserTarget": "angular12:build:quick"
       }
    },
    "defaultConfiguration": "development"
},

일이 있는지 .--configuration development,quick마지하다

"development": {
   "browserTarget": "angular12:build:development"
}

"quick": {
   "browserTarget": "angular12:build:quick"
}

그 결과:

"development": {
   "browserTarget": "angular12:build:development"
}

이제 왜 작동하지 않았는지 이해가 되네요:-)

솔루션:

은 다행히 됩니다.serve/quick 삭제:

"quick": {
     "browserTarget": "angular12:build:development,quick"
}

다음으로 실행만 하면 됩니다.

ng-serve --configuration quick

이 됩니다.development ★★★★★★★★★★★★★★★★★」quick의 설정architect/buildng build.

PS를 사용하고 제가 사용하고 있습니다.customWebpackConfig커스터마이즈가 가능한 @angular-builders/custom-webpack 패키지입니다.대답과는 무관하지만, 양쪽의 습관을 지킬 수 있었기 때문에 확실히 효과가 있었다는 것을 스스로 증명할 수 있었습니다.웹 팩 플러그인이 실행 중이고 원하는 하나의 느린 청크만 구축되었습니다.

당신은 에 대해 묻고 있나요?

"scripts": {
    [...]
    "build-i18n": "for lang in en es fr pt; 
       do ng build --config=$lang;
       done"
 }

언급URL : https://stackoverflow.com/questions/52061748/is-there-a-way-to-extend-configurations-in-angular-json

반응형

'programing' 카테고리의 다른 글

메뉴에 사용자 지정 게시 유형 보관을 추가하는 방법  (0) 2023.03.25
jQuery UI 날짜 선택기 - 수집되지 않은 유형 오류: 정의되지 않은 속성 'msie'를 읽을 수 없습니다.  (0) 2023.03.25
ngResource에 비해 Resangular를 사용하는 이점은 무엇입니까?  (0) 2023.03.25
OncePerRequestFilter란?  (0) 2023.03.25
react-redux-v6:withRef가 삭제됩니다.래핑된 인스턴스에 액세스하려면 연결된 구성 요소의 참조를 사용하십시오.  (0) 2023.03.25

'programing'의 다른글

  • 현재글angular.json으로 구성을 확장하는 방법이 있습니까?

관련글

댓글

티스토리툴바