ts-loader, typescript 적용

www.npmtrends.com/awesome-typescript-loader-vs-ts-loader

awesome typescript loader vs ts loader | npm trends

 

를 보면 ts loader를 사용하는 경우가 더 많아보임

 

typescript 옵션은 아래를 참고했다.

typescript-kr.github.io/pages/compiler-options.html

TypeScript 한글 문서

 

일단 줬던 tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs", // 모듈 생성결과
        "esModuleInterop": true, // 런타임 바벨 생태계 호환성을 위한 __importStar와 __importDefault 헬퍼를 내보내고 타입 시스템 호환성을 위해 --allowSyntheticDefaultImports를 활성화합니다.
        "target": "es5", // 기본값 es3, 어디까지 컴파일 할건가
        "noImplicitAny": false, // any라도 주라는뜻
        "moduleResolution": "node", // "Classic" : "Node" 둘 중에 하나, 보통 Node 많이 쓰는듯
        "preserveConstEnums": true, // 생성된 코드에 const enum 선언을 지우지 않습니다..? 잘 모르겠다
        "sourceMap": true, // 소스맵에 해당하는 .map 파일 생성
        "outDir": "dist", // 출력 구조를 디렉토리로 리다이렉트합니다. <- 이거는 webpack config랑 겹치는것 같은데?
        "baseUrl": ".", // 비-상대적 모듈 이름을 해석하기 위한 기본 디렉터리.
		"jsx": "react", // .tsx 파일에서 JSX 지원: "React", "Preserve", "react-native". 셋중에 하나, 일단은 React
		"paths": { // webpack config에서 alias 설정, 겹치는 것 같은데?
			"@page/*": ["page/*"],
			"@hooks/*": ["src/hooks/*"]
		}
    },
    "include": [ // 뭐를 컴파일 할건지, ** 하위디렉토리까지 재귀적, * 그냥
		"./src/**/*",
		"./page/**/*"
    ],
    "exclude": [ // 뭐를 제외할 건지
        "./dist/**/*",
        "./node_modules"
	],
}

 

잘 모르고 쓰는게 많은데.. 언제 다 배우지..