추가적인 옵션 및 설정

이 챕터는 사용자의 기호에 따라 추가적으로 설정해도 되는 챕터이기 때문에 필수적이진 않습니다.

대체적으로 많은 사용자들이 추천하는 라이브러리나 플러그인들을 정리합니다.

• Terminal

npm install @babel/runtime @babel/plugin-transform-runtime -D

@babel/runtime

• Babel modular runtime helpers와 regenerator-runtime 버전을 포함하는 패키지

모듈러 방식으로 함수를 실행하는 것을 포함

@babel/plugin-transform-runtime

• 코드 크기를 줄이기 위해 바벨의 helper code를 재사용할 수 있도록 하는 패키지

npm install @babel/plugin-transform-runtime \ @babel/plugin-syntax-dynamic-import \ @babel/plugin-proposal-class-properties -D

React 앱에서 클래스 필드 문법을 사용하기 위한 플러그인

"동적 가져오기"를 사용하기 위한 플러그인 등을 설치

npm install babel-plugin-transform-react-remove-prop-types \ @babel/plugin-transform-react-inline-elements \ @babel/plugin-transform-react-constant-elements -D

React.createElement 컴파일 결과 인라인 처리

정적 React 요소를 상수로 출력하는 플러그인

npm install babel-plugin-module-resolver -D

코드를 컴파일할 때, 절대경로로 작성된 path를 이해할 수 있게해주는 플러그인

npm install tsconfig-paths-webpack-plugin -D

tsconfig에 작성한 절대경로를 웹팩에서도 알 수 있게 해주는 플러그인

웹팩에 alias를 설정하는 방법은 여러가지가 있긴 하지만 가장 간편하게 사용가능

• WEBPACK

// webpack.common.js const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin'); module.exports = { ... resolve: { plugins: [new TsconfigPathsPlugin({})], extensions: ['.tsx', '.ts', '.js', 'jsx'], }, ... };

• ROOT

// .babelrc { "presets": [ "@babel/preset-env", [ "@babel/preset-react", { "runtime": "automatic" } ], "@babel/preset-typescript" ], "plugins": [ [ "@babel/plugin-transform-runtime", { "regenerator": true } ], [ "module-resolver", { "root": [ "src" ] } ], "@babel/plugin-syntax-dynamic-import", "@babel/plugin-proposal-class-properties" ], "env": { "production": { "only": [ "src" ], "plugins": [ [ "transform-react-remove-prop-types", { "removeImport": true } ], "@babel/plugin-transform-react-inline-elements", "@babel/plugin-transform-react-constant-elements" ] } } }

// tsconfig.json "baseUrl": "src", "paths": { "public/": [ "../public/" ], },

// .eslintrc "rules": { ...others "import/no-unresolved": "off", },