[React] Setting

alias import 설정

• IntelliJ > File > Settings > Languages & Frameworks > JavaScript > Webpack > webpack configuration file: <config/webpack.config.js> 경로 설정 후 저장

// config/webpack.config.js

const path = require('path');

resolve: {
    ...
    alias: {
        '@components': path.resolve(__dirname, '../src/components'),
    }
    ...
}

// src/App.js

import MyComponent from '@components/MyComponent'

Internet Explorer 10 지원 가능하도록 설정

// package.json

"browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all",
    "ie >= 10",
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
],

// webpack.config.js

entry: [
    ...,
    'react-app-polyfill/ie9',
    'react-app-polyfill/stable',

    // webpack-dev-server로 띄울 경우 IE 10에서 작동 불가
    // 아래 구분을 지우면 hot reload를 사용할 수 없지만 IE 10에서도 webpack-dev-server 사용 가능
    // isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
    
    paths.appIndexJs,
    ...
]

# yarn.lock 파일 제거 후 모듈 재설치
yarn install

커맨드 라인으로 파라미터 전달해서 사용하기

# 모듈 추가
yarn add cross-env

# 커맨드 라인으로 파라미터 전달 (PHASE=local)
cross-env PHASE=local node scripts/start.js

// PHASE 값 사용

const phase = process.env.PHASE
console.log(phase);

global props 설정

// <프로젝트>/src/props/default.json

{
  "app.name": "my-app",
  "app.description": "test example"
}

// <프로젝트>/src/props/local.json

{
  "phase": "local",
  "url": "http://local.example.com"
}

// <프로젝트>/config/props.js

const propsFiles = ['default.json', `${process.env.PHASE}.json`];

const result = propsFiles.reduce((result, propsFile) => {
    try {
        const json = require(`../src/props/${propsFile}`);
        const props = Object.entries(json).reduce((result, [key, value]) => {
            result[key] = JSON.stringify(value);
            return result;
        }, {});

        result = { ...result, ...props };
    } catch (e) {}
    return result;
}, {});

module.exports = {
    'global.props': result,
};

// <프로젝트>/config/webpack.config.js

const props = require('./props');
...
plugins: [
    ...
    new webpack.DefinePlugin(props),
    ...
]

# 실행
cross-env PHASE=local node scripts/start.js

// global.props 사용
const appName = global.props.app.name;
const url = global.props.url;