tsconfigのmoduleResolution

module specifierをどう解決するかを制御する

以下2つをどのように紐づけるかという話

import等で指定されているpath (module specifier)と

実際のディスク上のファイル

runtimeや、bundlerのmodule resolverに合わせて設定する必要がある

重要なこと

デフォルト値はtsconfigのmoduleの値によって変わる

TypeScriptのcompile時にmodule specifierは書き換えられることはない

docs

Module resolution - Theory

こっちを先に読んだほうがいいかも

TypeScriptのプロジェクトは登場する拡張子がやたらある

.js, .ts, .d.ts

.mjs, .mts, .d.mts

.cjs, .cts, d.cts

jsx, .tsx

この辺をどのように解決するかというのを制御している

選択肢

node16

module: node16と一致する

つまり、Node.js側の設定を参照する

projectをNative ESMにするためにはこれを指定する

tsなのに、.jsという拡張子でimportする必要がある

nodenext

2024/4現在はnode16と同じ

bundler

あんまりよくわかっていないmrsekut.icon

Webpackなどのbundlerで使用されるmodule解決の挙動を再現する

何らかのBundlerを使うことが前提になっている

tsconfigのmoduleはesnextに設定する必要がある

Node.js v12では、npmパッケージをインポートするための新しいモジュール解決機能（package.jsonの "exports "フィールドと "imports "フィールド）が導入され、多くのバンドルがESMインポートのより厳格なルールを採用することなく、これらの機能を採用しました。 ref

package.jsonのexports

package.jsonのimports

TypeScript v5.0で入った

ref TypeScript で"moduleResolution": "Node"は使わないほうがいい

----↓基本使わなそう-----

node10

以前はnodeだった

tsconfigのmoduleがcommonjsのときのデフォルト

Node.js v12以前のmodule解決の挙動を再現する

v12以前の挙動をするので、package.jsonのtypeやpackage.jsonのexportsは無視される

ref TypeScript で"moduleResolution": "Node"は使わないほうがいい

classic