Webpack 및 Dotenv를 사용하는 각도 범용 ENV 변수

지난주에 어떤 이유로 든 일을 멈췄습니다. 변수가 예상대로 가져오지 않았습니다.

이것이 작동하지 않는 경우 웹팩 버전이 있습니다. webpack을 사용하면 실제로 빌드 프로세스가 느려지는지 궁금합니다. 피해야 하는가? 아시는 분 댓글 부탁드립니다. 가능하면 외부 종속성을 피해야 한다고 생각하지만 이렇게 하면 process.env를 사용할 수 없게 됩니다.

다음은 Angular Universal에 대한 지침입니다. 평소와 같이 다른 사람들이 지나치게 복잡해 보이는 것을 간단하게 시도했기 때문에 Google에서 다른 결과를 수집해야 했습니다. ( ͡°͜ʖ ͡°)

종속성 설치

npm i -D @angular-builders/custom-webpack
npm i -D @angular-builders/dev-server
npm i -D dotenv

custom-webpack.config.ts 생성

항상 Typescript를 사용하세요! 이것은 모든 JS 개발자 회사의 규칙이어야 합니다. 이것을 루트 디렉토리에 넣으십시오.

import { EnvironmentPlugin } from 'webpack';
import { config } from 'dotenv';

config();

module.exports = {
  plugins: [
    new EnvironmentPlugin(['FIREBASE_API_DEV', 'FIREBASE_API_PROD'])
  ]
}

물론 여기에서는 Firebase 예제를 사용하고 있습니다. JSON 파일로 가져올 수 있기 때문입니다.

환경 파일 편집

environment.prod.ts

export const environment = {
  production: true,
  firebase: JSON.parse(process.env.FIREBASE_API_PROD as string)
};

문자열을 가져오기만 하는 경우에는 여기에 JSON.parse()가 필요하지 않습니다. 모든 환경 버전 파일에 대해 동일한 작업을 수행합니다.

Angular.json 편집

projects.architect.build.builder를 교체합니다.
에서:

@angular-devkit/build-angular:browser

에게:

@angular-builders/custom-webpack:browser

projects.architect.serve.builder를 교체합니다.
에서:

@angular-devkit/build-angular:dev-server

에게:

@angular-builders/custom-webpack:dev-server

projects.architect.test.builder를 교체합니다.
에서:

@angular-devkit/build-angular:karma

에게:

@angular-builders/custom-webpack:karma

projects.architect.server.builder를 교체합니다.
에서:

@angular-devkit/build-angular:server

에게:

@angular-builders/custom-webpack:server

다음에 추가:
프로젝트.건축가.서버.옵션
프로젝트.건축가.빌드.옵션
프로젝트.아키텍트.테스트.옵션

"customWebpackConfig": {
  "path": "./custom-webpack.config.ts"
},

.env 파일 만들기

평소와 같이 변수를 .env 파일에 넣습니다.

FIREBASE_API_DEV={"apiKey":"..." ...}
FIREBASE_API_PROD={...}

그리고 끝났습니다. 예가 필요한 경우 여기my repository가 있습니다.

제이