웹 패키지/특정 파일 구축에 다른 Loader 사용

모티프

Type Script + AWS Lambda의 백엔드를 디버깅할 때 웹 패키지의 구축 시간이 빠를 수 있을 것 같아서 ts-loader에서 esbuild-loader로 옮기려고 시도했다.
그러나 RDS(MySQL)의 ORM에 TypeORM를 사용했기 때문에 esbuild-loader는 emitDecoratorMetadata와 대응하지 않고 구축 오류를 토해냈기 때문에 Decortor가 포함된 파일은 ts-loader이고 포함되지 않은 파일은 esbuild-loader로 구축할 수 없음을 조사했다.

해결책

github discussion에 링크된 기사처럼 웹 페이지입니다.config.js내testproperty에서 구축 대상의 파일의 경로(String)를 얻을 수 있기 때문에 이후 파일의 경로가 규칙과 일치하면 웹 패키지esbuild-loader를 사용하여 정규적으로 표시할 수 있습니다.

function hasDecorator(fileContent, offset = 0) {
  const atPosition = fileContent.indexOf('@', offset)
  if (atPosition === -1) {
    return false
  }
  if (atPosition === 1) {
    return true
  }
  if (["'", '"'].includes(fileContent.substr(atPosition - 1, 1))) {
    return hasDecorator(fileContent, atPosition + 1)
  }
  return true
}

modules.exports = {
  module: {
    rules: [
      {
        test: /\.(ts)$/,
        oneOf: [
          {
	    test: (filePath) => {
	      if (!filePath) {
	        return false
	      }
	      try {
	        const fileContent = fs.readFileSync(filePath).toString()
	        return !hasDecorator(fileContent)
	      } catch (e) {
	     　　  console.error(`uncaught error`)
	        return false
	      }
	    },
	    use: [
	      loader: 'esbuild-loader',
	      options: {
	        loader: 'ts',
	        target: 'es2017',
	      },
	    ],
	  },
	  {
	    use: [
	      loader: 'ts-loader',
	      options: {
	        transpileOnly: true,
	      },
	    ],
	  },
	},
      ],
    ],
  },
}

링크

https://github.com/privatenumber/esbuild-loader/discussions/117