ts-nodeの導入を検討する

[tyokinuhata]

No description provided.

[tyokinuhata]

• ES Modules形式にしたい
• TypeScriptにしたい

[tyokinuhata]

tsconfig.jsonでmoduleをesnextにしているため、TypeScriptからはES Modulesが使えるようになっているが、package.jsonのtypeでmoduleを指定していないため、CommonJSでないと実行に失敗する

[tyokinuhata]

• つまり、tsconfig.jsonとpackage.jsonの設定で、モジュールの方式が一致している必要がある
• TypeScriptのモジュールをCommonJSにする場合、src/scripts専用のtsconfig.jsonを作成し、別途設定したほうが良さそう
• JavaScriptのモジュールをES Modulesにする場合、package.jsonへの設定が必要で、その影響がリポジトリ全体に及ぶため、src/scripts以下に無いJSについても考慮する必要がある(例えばnext.config.jsとか.lintstagerc.js)

[takashi0602]

tsconfig.jsonでmoduleをesnextにしているため、TypeScriptからはES Modulesが使えるようになっているが、package.jsonのtypeでmoduleを指定していないため、CommonJSでないと実行に失敗する

これに関しては誤りで、tsconfig.jsonのmoduleはどの形式で出力するかなので、ES Modulesが使えるようなるわけではなさそう

• refs.
  • https://gist.github.com/azu/56a0411d69e2fc333d545bfe57933d07
  • https://www.typescriptlang.org/tsconfig#module

package.jsonで"type": "module"にすることで、.jsファイルがES Modulesとして扱うようになり、既存のCommonJSのファイルは.cjsの拡張子にすることでそのままの記述で使用できる。
Next.js（next.config.js）は"type": "module"にも対応してそう（公式ドキュメントが変わりすぎてて、公式ドキュメントからは見つけられなかった）
ref. https://zenn.dev/link/comments/460ec1c4e4d839

.lintstagerc.jsとかは.lintstagerc.cjsにしてCommonJSとして扱うのが良さそう（ESLintもinitした際にeslintrc.cjsが生成されたので他の設定周りも拡張子変更で良さそう）

[takashi0602]

ただ、影響範囲が大きいそうなので、scripts以下のファイルの拡張子を.mjsにしES Modulesとして扱うようにするのが良さそうな気がする。

[tyokinuhata]

ただ、影響範囲が大きいそうなので、scripts以下のファイルの拡張子を.mjsにしES Modulesとして扱うようにするのが良さそうな気がする。

scripts以下のファイルを.mjsにしたらそれはJSであってTSでないと思うんですよね
そして.mtsみたいな拡張子はなさそう
今回の一番の目的は主にscripts以下をTSに書き直してts-nodeで実行することだと思うのでその方法は使えなさそう

[tyokinuhata]

tsconfig.jsonのmoduleはどの形式で出力するかなので、ES Modulesが使えるようなるわけではなさそう

これはその通りで、現状はTS側ではES Modulesで出力するようになっているが、JS側がCommonJSとして扱うようになっているのが問題

[tyokinuhata]

なんで、基本的にはpackage.jsonのtypeにmoduleを指定し、対応していないものは部分的に.cjsに変更するというのが良い着地点である気がしてきたな
そしてscripts以下はES Modules形式のTSで記述する

[takashi0602]

勘違い失礼しました🙏🙏🙏

なんで、基本的にはpackage.jsonのtypeにmoduleを指定し、対応していないものは部分的に.cjsに変更するというのが良い着地点である気がしてきたな
そしてscripts以下はES Modules形式のTSで記述する

とりあえずこれ↑でいきましょ！
ちなnext.config.jsはTSでは書けませんでした😢
https://nextjs.org/docs/pages/building-your-application/configuring/typescript#type-checking-nextconfigjs

[tyokinuhata]

TS + ES Modules -> JS + ES Modules -> JS + CommonJS の優先順位でやる

[tyokinuhata]

念のため、Next.jsで使用しているTSのバージョンと揃えている方が良さそう

[takashi0602]

v4.5.2以上を推奨していて、今の使用してるのがv4.9.5なので大丈夫そう
https://nextjs.org/docs/pages/building-your-application/configuring/typescript#minimum-typescript-version

It is highly recommended to be on at least v4.5.2 of TypeScript to get syntax features such as type modifiers on import names and performance improvements.

[tyokinuhata]

あー、そうか。ts-nodeもtscに依存しているから良いのか。

[tyokinuhata]

メモ

• 実装に先立って、影響範囲と検証項目を洗い出しておく

[tyokinuhata]

• .lintstagedrc.js
  • 修正内容
    • [x] JS + ES Modules
  • 検証項目
    • [x] git commitを実行する
• .svgrrc.js
  • 修正内容
    • JS + CommonJS
  • 検証内容
    • yarn iconsを実行する
• changelog.config.js
  • 修正内容
    • JS + CommonJS
  • 検証項目
    • git commitを実行する
• next.config.js
  • 修正内容
    • JS + ES Modules
  • 検証項目
    • yarn devを実行する
• src/scripts/generateImages.js
  • 修正内容
    • TS + ES Modules形式
  • 検証項目
    • yarn imagesを実行する
• src/scripts/lighthouse.js
  • 修正内容
    • TS + ES Modules形式
  • 検証項目
    • yarn lighthouseを実行する