Babel

endsoul·2020년 12월 18일
0

JSX => Javascript 로 트랜스파일링

['@babel/preset-react',
  {
    development: process.env.NODE_ENV === 'development',
    runtime: 'automatic',
    importSource: '@welldone-software/why-did-you-render'
  }
]

두 플러그인은 개발 모드에서 유용한 정보를 엘리먼트에 추가 하는 역할을 하는 듯
@babel/plugin-transform-react-jsx-self

@babel/plugin-transform-react-jsx-source
<sometag __source={ { fileName: 'this/file.js', lineNumber: 10, columnNumber: 1 } } />

rumtime: 'automatic'
development 옵션이 true 라면 자동으로 아래 플러그인을 추가.
false 라면 JSX 트랜스파일

  • @babel/plugin-transform-react-jsx-self
  • @babel/plugin-transform-react-jsx-source

rumtime: 'classic'
development 옵션에 상관없이 항상 추가 하는 듯

Production 에서는 불필요하니까 rumtime: 'automatic' 을 사용하는게 좋을 듯

importSource: '@welldone-software/why-did-you-render'
development 옵션 true 라면 패키지를 추가하는 듯

0개의 댓글