CJSのprojectをESMに移行する
CJSのprojectをES Modulesに移行する
移行する理由
使用したいpackageがPure ESM packageだと、自身のプロジェクトもESMでないと使用できない
CommonJSからES Modulesを参照できないから
require(ESM)を使えばできるようになった
参考
Pure ESM package · GitHub
TypeScriptのESMでハマる - くらげになりたい。
Pure ESM package · GitHub
#WIP
#??
そのprojectがESMなのかCJSなのかの判定
どこを見れば分かる？一箇所見るだけで分かる？
コード内部のimport/requireだけ見ても判断できない
例えば、コード上はimportのみを使っていても、babelとかがrequireに変換しているかもしれない
Fake ESM
https://www.wantedly.com/companies/wantedly/post_articles/410531#:~:text=自分たちのコードがNative%20ESMかどうかを知る
以下のどちらかに該当すればおそらくNative ESMです。
package.jsonに "type": "module" の記述があり、拡張子に .js を使っている。
拡張子に .mjs を使っている。
https://nodejs.org/api/packages.html#determining-module-system
tsなのに、.jsという拡張子でimportする必要がある
package.jsonのmainとpackage.jsonのexportsとは
TypeScript v4.7#6291fd251982700000932946
Next.js等を使っているときにどうすればよいのかわからない
普通に考えると、下記の手順のようにやれば良い気がしているが、
bundlerを使っているのだから、tsconfigのmoduleResolutionはnode16よりbundlerを指定すべき？という気もしてくる
https://blog.s2n.tech/articles/dont-use-moduleresolution-node#結局どの設定を使えばいいのか
type: moduleをつけるとライブラリをimportできなくなることがある #??
そんなことあるんだろうか
一部のライブラリを読み込めなくなったけどなんで？
ESMは、ESMもCJSも読み込めるはずだが
https://www.wantedly.com/companies/wantedly/post_articles/410531#:~:text=こします%E3%80%82-,Native%20ESM移行にともなう困難,-ライブラリに先行
手順 ref ref2
TypeScript v4.7以降を使う
package.jsonでの変更
★type: "module"を追加する
package.jsonのmainの"index.js"を、package.jsonのexportsの"./index.js"に変える
これは直接的にはESM云々と関係ないはずmrsekut.icon
ただ、mainは機能が限定的だし、exportsは環境の分岐とかもできるからやっとき、
ぐらいのものだと思う
package.jsonのenginesをNode.js v16以降にする
tsconfig.jsonでの変更
tsconfigのmoduleにmodule: node16を指定する
tsconfigのmoduleResolutionに"node16"を指定する
その他のファイルでの変更
拡張子も含めたimpot文に置き換える
例えば
import x from '.';を
import x from './index.js';に変更する
tsなのに、.jsという拡張子でimportする必要がある
全てのrequire()/module.exportをimport/exportに置き換える
namespaceの使用をやめ、exportを使用する
ts-nodeなどのtsを直接実行するやつは個別に対応が必要？
https://github.com/TypeStrong/ts-node/issues/1007
ひえー、だるすぎ