타입스크립트에서 import 쓸 때, js변환 안해주는거임?

[따봉고양이(gaq4zzfjr77j)]

타입스크립트 파일에 다음과 같은 코드를 컴파일 했을 때,

import * as ABC from './abc/abc'

그 결과가

import * as ABC from './abc/abc.js'가 아니라

import * as ABC form './abc/abc'가 나와서 제대로 import가 안되는데

tsconfig를 변경해서 수정할 수 있는건가?

[익명(39.119)]

js에서 import할 때는 확장자 있어야 됨.

[익명(39.119)]

jsconfig, tsconfig으로도 해결 안 됨. node에서는 packge.json에 등록되어 있는 라이브러리면 그냥 패키지 이름 가지고도 됨. 근데 그냥 파일 import 하는 건 .js 있어야 됨

[따봉고양이(gaq4zzfjr77j)]

단순 config파일 수정으론 안되는구만. 그런데 package.json에서 따오는 라이브러리는 되고 오우

[익명(180.71)]

이건 typescript module 전략에 따라 다름. cjs를 쓰면 알아서 Module resolving할거고 esm쓰면 확장자까지 붙일거임

[익명(180.71)]

근데 너가 컴파일 결과 보니까 import로 나오는거보니 Esm인것같네? 너의 tsconfig 컴파일러 옵션을 알려줘봐

[익명(180.71)]

근데 애초에 저렇게 하게되면 IDE나 tsc에서 에러가 났을텐데..?

[따봉고양이(gaq4zzfjr77j)]

타겟은 es2016, 모듈은 es2015. 그런데, esm이 내가 쓰는거 말하는거 맞지 않나? 빌드해도 js는 안붙여주더라

[따봉고양이(gaq4zzfjr77j)]

에러는 안남. 브라우저 실행하면, import에 확장자가 제대로 안붙어서 파일을 못찾는다고 뜨긴하다만

[익명(180.71)]

esm표준은 무조건 확장자 붙여야하고 ts 확장자는 또 import안됨 ㅋㅋ 우리가 보통 보는 확장자 없는 import는 tsc/babel에서 require()로 변환해주는거고

[익명(180.71)]

typescript파일에서 import한거맞지?

[익명(180.71)]

moduleResolution을 node로 바꿔보거나, module자체를 cjs로 바꿔봐

[따봉고양이(gaq4zzfjr77j)]

호오 module을 CommonJs로 변경했고, 컴파일은 잘되지만, 웹브라우저에서 exports를 인식못하는군

[따봉고양이(gaq4zzfjr77j)]

근디, 웹브라우저는 commonjs방식의 모듈을 지원 안하니까, 못쓰는거 아녀?

[익명(180.71)]

음 그건 너의 선택에 따라 다른거지. 웹팩같은걸 써주면 cjs를 잘 엮어줄거고 그냥 브라우저의 esm기능을 쓸거면 esm표준에 따라야지! ㅋㅋ

[익명(180.71)]

퓨어한 ts를 읽히는거라면 esm으로 설정하는게 좋을거고 그럼 애초의 문제가 import * as ABC from './abc/abc' -> import * as ABC from './abc/abc.js 가 되어야하는거지

[익명(180.71)]

근데 IDE안쓰눙..? 이런거 다 짚어줄텐데..

[따봉고양이(gaq4zzfjr77j)]

오호.... 재밌네

[따봉고양이(gaq4zzfjr77j)]

IDE에선 오류라고 떠서 바꿔주긴 했는데, ts에서 바로 js파일을 import하는게 뭔가 심미적으로 불편해서 자동으로 변환하거나 애초에 안되서 툴을 써야하는지 찾아보고 있었음 ㅋ-ㅋ

[익명(180.71)]

ts esm정책이 더 어이없음.. ts 파일 못읽어올걸..?ㅋㅋ;;;

[익명(180.71)]

기존 cjs에서 했던 방식들 (확장자 안써주는 방식) 은 직접 모듈시스템이 폴더 뒤지면서 적절한 파일을 찾아줘야 하는 부분이 있어서 노드 개발자가 후회하고 있다 카더라 ESM에서는 확장자를 대놓고 지정하는 방식으로~

[따봉고양이(gaq4zzfjr77j)]

오... 재밌네

[따봉고양이(gaq4zzfjr77j)]

댓글 감사용~