[npm] esbuild #3

esbuild에 대해 추가적으로 알아둘 만한 것들

jsxFactory

React.createElement를 다른 형태의 alias로 사용할 수 있다.
jsx Element를 발견하면, React.createElement()로 컴파일된다.

예를 들어 아래와 같이 import 이름을 바꾼다면 element가 rendering될때, 우리가 원하는 것은 _React.createElement()로 사용하는 것이다.

• 어떤 이유에 의해서, React를 중복 import하는 상황이 있는 경우
• 예를 들면 show()라는 내장 함수를 내가 만든다고 가정했을 때, show(<div>Hello</div>)를 iframe에서 미리보기로, 나타내려면, 내장함수를 만들면서 jsx를 사용하기 위해서 import React from 'react'를 해야한다.

import _React from 'react';
import _ReactDOM from 'react-dom';

const show = () => {
  _ReactDOM.render(<div>Hello</div>, document.querySelector('#root'))
}

위와 같이 esbuild에 내장함수를 만들어 넣는다면, 아래 코드를 build에 추가 해야한다.

jsxFactory: '_React.createElement'

(참고 : jsxFragment도 위와 같이 추가해주면 된다.)