Esbuild plugin 예시, jsx 상단부에 강제 react 임포팅 구문 삽입 플러그인

const autoImportReactPlugin = {
  name: 'auto-import-react',
  setup(build) {
    build.onLoad({ filter: /\.[jt]sx$/ }, async (args) => {
      const fs = require('fs').promises;
      const source = await fs.readFile(args.path, 'utf8');
      
      const reactImport = `import * as React from 'react';`;
      const hasJsx = source.includes('<') && source.includes('>');
      const contents = hasJsx ? reactImport + '\n' + source : source;

      return { contents, loader: 'jsx' };
    });
  }
};

 

build구간에서 사용하는 플러그인으로 react 구문을 강제 삽입하는 과정을 두는 구간 따로 babel/core 안할때 개조해서 쓰기 좋은 구성