process_env

2019-01-15
#webpack

a라는 프로젝트에서 b,c의 라이브러리를 땡기고 있는 상황에서 에러가 발생하였다.
b라이브러리가 참조하고 있는 d 프로젝트에서 전역상수인 process.env.NODE_ENV 값을 찾지 못해 발생한 에러였다.
a프로젝트는 process.env.NODE_ENV값이 없기 때문이었다.
이전에 대충 알기는 했는데 막상 에러가 나니까 어디서 발생한지 몰랐다.
이번 기회에 알아보자…

먼저 webpack.config.js이 파일에 DefinePlugin이라는 로더를 사용해서 정의한다.
DefinePlugin은 컴파일 타임에 구성할 수 있는 전역상수를 만든다.

1
2
3
4
5
6
7
8
plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV),
            BUILD_ENV: JSON.stringify(process.env.NODE_ENV)
        }
    }),
],

이렇게 process.env 값을 전역 상수로 설정하고 필요한 곳에서 마음대로 꺼내 쓸 수있다.
보통 빌드 상태가 dev인지 production인지 분기처리할 때 사용한다.
package.json 파일을 보면 아래와 같다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"start": "npm run play && NODE_ENV=dev",
"play": "NODE_ENV=dev webpack-dev-server --config webpack-dev-server.config.js --progress --inline --colors"
}

``` 


npm start 명령어를 실행하면 `NODE_ENV` 의 값은 dev가 된다.

만약 명령어부분에 따로 설정을하지 않은 경우 로더 설정하는 부분에 아래와 같이 값을 고정시켜놓으면 된다. 
``` javascript
plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production'),
            BUILD_ENV: JSON.stringify('production')
        }
    }),
],

한가지 더 종종 큰 프로젝트를 실행하다보면 아래와 같은 문구를 볼 수 있다.

1
"FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory"

메모리 문제이다.

그럴때는 해결책으로 install을 하면 된다.

1
2
npm install -g increase-memory-limit
increase-memory-limit

또는 아예 스크립트 start 명령어에 NODE_OPTIONS=--max_old_space_size= 설정을 해주면 된다.

오늘도 또한 느낀점은 내가 약 2년정도 동안 참 한게 많이 없고 많이 많이 부족한것을 느끼게 되었다… 후.. 열심히 공부하자.