Webpack에서 Typescript의 환경 변수

Question

Webpack의 DefinePlugin을 사용하여 Typescript에서 전역을 선언하는 데 문제가 있습니다. 내가 뭘 잘못하고 있는지에 대한 의견을 듣고 싶었어.

나는 나의 .bash_profile에서 환경 변수를 만들어 내 webpack.config.js에서

export API_KEY_GOOGLE_MAPS=xxxxxxxxxxxxxxxx 

을, 나는 다음과 같은 라인이 있습니다 index.tsx 내부

... 
plugins: [ 
    new webpack.DefinePlugin({ 
    API_KEY_GOOGLE_MAPS: JSON.stringify(process.env.API_KEY_GOOGLE_MAPS), 
    }), 
], 
... 

(I 반응 사용하고를) 다음을 수행합니다.

declare var API_KEY_GOOGLE_MAPS: string; 

console.log(API_KEY_GOOGLE_MAPS) 

이렇게하면 t에서 다음 오류가 발생합니다. 그는 console.log을 포함하는 행을 표시합니다.

ReferenceError: API_KEY_GOOGLE_MAPS is not defined 

누구에게 리드가 있습니까?

Answer 1

create-react-app 환경 변수 REACT_APP_로 시작해야합니다

참고 : 당신은 REACT_APP_로 시작하는 사용자 환경 변수를 작성해야합니다. NODE_ENV을 제외한 다른 변수는 시스템에서 같은 이름을 가질 수있는 개인 키를 실수로 노출시키지 않도록 무시됩니다.

"Adding Custom Environment Variables"설명서.

파일을 .bash_profile 파일에 추가하는 대신 .env 파일에 환경 변수를 추가해야합니다. 해당 파일은 빌드 (예 : start 또는 build)에 따라 선택되며 애플리케이션을 더 쉽게 공유하고 배포 할 수 있습니다.

Answer 2

내가하는 일은 .env 파일 (.gitignore에 추가)을 내 프로젝트 파일의 루트에있는 것입니다.

NODE_ENV=development 

그럼 내가 어떤 웹팩 파일의 값에 액세스 할 수 dotenv의 NPM 모듈을 사용 : 내 프로젝트 환경 변수 (추가 변수가 자신의 라인에 각각 추가하여 분리 할 수있다) 정의하는 파일 내에서

(또는 서버 측 expressJS 파일).

console.log(NODE_ENV); // development 

Answer 3

내 자신의 질문에 대답 : 내 응용 프로그램 내에서 참조 할 수 있습니다 지금

// in the command line 
$ npm install --save dotenv 

// at the top of the webpack config file 
require('dotenv').config(); 

// in the plugins of the webpack config 
plugins: [ 
    new webpack.DefinePlugin({ 
     'NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
    }) 
], 

가 웹팩에 의해 transpiled되고 내 프로젝트가 create-react-app을 사용하여 생성 된, 그 문서에 따르면, 환경 변수는이 액세스 할 수 있습니다 방법 :

console.log(process.env.API_KEY_GOOGLE_MAPS) 

webpack.DefinePlugin()은 필요하지 않습니다.