Webpack에서 제공하는 Angular 2 App의 환경 기반 속성?

저는 JHipster가 생성 한 독립형 Angular console로 작업 중이며 Spring Boot 서버를 사용하고 있습니다. 환경 (로컬, 개발, 자극 등)에 따라 다른 속성을 가진 애플 리케이션을 제공 찾고 있습니다.Webpack에서 제공하는 Angular 2 App의 환경 기반 속성?

I see a lot of posts about configuring the webpack build per-environment하지만 URL 또는 기타 데이터를 내 Devular 또는 Production에서 실행 중인지 여부에 관계없이 변경되는 Angular 2 4.x 앱의 직접 데이터에 지정해야합니다. 웹팩을 통해 Angular를 시작할 때 이러한 유형의 환경 구성이 가능합니까?

출처

2017-12-20 IcedDante

dotenv-webpack 플러그인을 사용하는 것이 좋습니다.

이 당신이 환경 변수에 액세스 할 수 process.env을 사용할 수 있습니다

const  Dotenv  =  require('dotenv-webpack'); 
... 
plugins: [ 
    new  Dotenv({ 
     path:  './.env' 
    }) 
]

.env의

URL=http://example.com 
ENV=PROD 
...

webpack.config.js :

constructor(private http:HttpClient) { 
    http.get(`${process.env.URL}`).subscribe(t=> { 
     ... 
    }); 
}

환경 변수는 빌드시에 대체됩니다.

출처

2017-12-20 03:49:49 pixelbits

나는 DotEnv 플러그인을 설치하지는 않았지만 웹 패키지 페이지에 나열된 DefinePlugin 솔루션을 구현했습니다. 나는 멍청이이기 때문에 설명서가 혼란스럽고 나열된 예제는 'process.env'변수 (새로운 개념)를 사용하지 않았기 때문에 작동하지 않았습니다.

는 여기에 내가이 시스템을 설정하는 데 사용 거친 단계별 가이드 :

가 웹팩을 만듭니다. envName .js 파일을 지원해야합니다.
모든 빌드 설정 외에도 사용자 지정 속성을 사용할 각 파일에 DefinePlugin 항목을 만듭니다. 내 초기 테스트에서 내 webpack.common에 "전역"상수를 작성하면 다른 환경을 대체하므로 매개 변수를 설정하지 않아도되었습니다.
"process.env"키 아래에 DefinePlugin 상수를 만듭니다. 이것은 js 기반 시스템이 특정 프로세스에 대한 데이터를 저장하는 데 사용하는 특수 키입니다.
원사, 노드, mvn 등을 수정하여 로컬 개발 환경을 활용하십시오. 내 상황에서는 dev 환경이 클라우드에 있으므로 로컬 화 된 테스트를 위해 기본값 인 local 환경을 만들었습니다.
1. 정의 된 상수는 이제 필요한 가져 오기 유형 명령문없이 각각의 환경에서 액세스 할 수 있습니다.

다음은 예제 코드 조각입니다. 내 webpack.local.

~/src/main/webapp/fake-service.ts 
@Injectable 
export class FakeService { 
    private URL_ROOT = process.env.API_URL + 'api/v2/externalService/resource/'; 
    constructor(private http: HTTP) {} 
    get(): Observable<any> { 
     if(process.env.NAME == 'local') { 
      console.log("Calling url at " + this.URL_ROOT); 
     } 
     return this.http.get(this.URL_ROOT).map((res: Response) => res.json()); 
    } 
}

이 아마이 할 수있는 더 좋은 방법입니다 (또는에있을 것입니다 :

... 
new webpack.DefinePlugin({ 
'process.env': { 
    NAME: JSON.stringify('local'), 
    API_URL: JSON.stringify('http://localhost:8000/'), 
} 
}) 
...

것은 이제 내 fakeService 타이프 라이터 클래스에서이 값에 액세스하려면 가정 해 봅시다 다음 plugins 항목 아래의 js 파일 미래). 응용 프로그램에이 process.env 종속성을 구축하는 대신 이러한 값을로드하고이 데이터를 활용해야하는 서비스 나 구성 요소에 주입 할 수있는 Configuration 서비스를 만드는 것이 좋습니다.

출처

2017-12-21 13:12:34 IcedDante

Webpack에서 제공하는 Angular 2 App의 환경 기반 속성?

답변

관련 문제