Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TypeScript・Viteの設定に関するドキュメントを追加する #1099

Closed
1 task
KentaHizume opened this issue Apr 16, 2024 · 6 comments · Fixed by #1264
Closed
1 task

TypeScript・Viteの設定に関するドキュメントを追加する #1099

KentaHizume opened this issue Apr 16, 2024 · 6 comments · Fixed by #1264
Assignees
@fkoyama
Milestone
v0.9

Comments

@KentaHizume
Copy link
Contributor

KentaHizume commented Apr 16, 2024 •
edited
Loading

概要

現在、アプリケーション開発手順のVue.js編にはTypeScript周りの設定に関する記載があまりない。
一方で、サンプルAPでは、create-vueのテンプレートから設定を修正している箇所もいくつか存在するので、
ガイドを利用する際に躓く原因になる可能性がある。
そのため、tsconfig.*.jsonの意味や設定内容等を解説するセクションを追加する。

詳細 / 機能詳細（オプション）

  • .NET編では、プロジェクトの共通設定に関するセクションが設けられているので、同等の内容を記載したい。

https://maris.alesinfiny.org/guidebooks/how-to-develop/dotnet/project-settings/#dotnet-sdk-settings

完了条件

  • TypeScriptの設定を解説するセクションがアプリケーション開発手順のVue.js編に追加されていること
@KentaHizume KentaHizume self-assigned this Apr 16, 2024
@KentaHizume
Copy link
Contributor Author

KentaHizume commented Apr 17, 2024 •
edited
Loading

トピック案

Project Reference

  • 根となるtsconfig.jsonから複数のtsconfig.**.jsonを呼び出す機能があることと、
    複数に論理分割できることの意義と、論理分割したそれぞれの設定ファイルの役割を解説する

https://www.typescriptlang.org/docs/handbook/project-references.html

  • Cypress用のtsconfigは独立していて、cypressフォルダ配下にあるので忘れやすい

tsconfigのパラメータ

extends

  • 各tsconfgはnpmパッケージで提供されているtsconfigを継承するように設定されているので、継承元の設定値が存在する。どこで設定されているかと、Project Referenceと合わせて継承、Compositeの関係性を見失いやすいのでこのことは図示、コメントしておきたい。
  • イメージ

https://zenn.dev/sa2knight/articles/vue-3-ts-config

include

  • mockの説明とセットだが、vite.config.tsでmockをimportしている関係で、tsconfig.node.jsonにmock一式をincludeする必要がある

CompilerOptions

@1nu1taichi 1nu1taichi changed the title TypeScriptの設定に関するドキュメントを追加する TypeScript・Viteの設定に関するドキュメントを追加する Apr 17, 2024
@1nu1taichi
Copy link
Contributor

vite.config.ts

@tsuna-can-se tsuna-can-se added this to the v0.9 milestone Apr 18, 2024
@KentaHizume
Copy link
Contributor Author

KentaHizume commented May 17, 2024 •
edited
Loading

Cypressに関する調査

cypress-io/cypress#28373

①Cypressが廃止予定のViteのCJSビルドAPIを叩いてしまうという問題があり、
この理由は設定ファイルの読み込みに使用している依存しているts-nodeの制限によるものらしく、
それゆえCypressからts-nodeへの依存をやめるような改修をしたほうがよいかも
という意見が出ている

I guess this is because of the limitation of ts-node that Cypress uses underlyingly to load the configuration files:
…
IMO, getting rid of ts-node may be a better option here. Because there are other well-known issues of this tool.

しかしDresscaだと再現できない…

TypeStrong/ts-node#1791 (comment)
②そしてts-nodeに制限がある理由は、
nodeの--loaderオプションに問題があるから、らしい

Node does not give us any way to programmatically register the ESM hooks at runtime. If you're curious to learn more, check out node's docs for --loader.

https://nodejs.org/api/cli.html#--experimental-loadermodule
③ただ、nodeの--loaderオプションは廃止されて、
--experimental-loader=moduleになっており、
さらにこれも廃止されて --import with register()という構文になる予定

このメッセージはDresscaでも出力される

DevTools listening on ws://127.0.0.1:51811/devtools/browser/8d31db07-68ce-403d-b37b-8d93c89d6dde
(node:26972) ExperimentalWarning: `--experimental-loader` may be removed in the future; instead use `register()`:
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("file%3A///C%3A/Users/khizume1.IXAS/AppData/Local/Cypress/Cache/13.7.1/Cypress/resources/app/node_modules/ts-node/esm/transpile-only.mjs", pathToFileURL("./"));'

④ts-nodeもこの構文に対応していこうという動きがある様子

TypeStrong/ts-node#2072
TypeStrong/ts-node#1909 (comment)

⑤ts-nodeがreqisterに対応した形に解消されれば、
推移的に①の問題（Cypressが廃止予定のViteのCJSビルドAPIを叩いてしまう）が解決されるので、
CypressがESMに対応したことになるはず？

Cypressのモード

CypressにはEnd-to-End TestとComponent Testsの2つのモードがあり、
Vite 5に未対応なのはComponent Testsのほうで、
Dressca的にはComponent Testsは使用していない
（単体テスト・コンポーネントテストはVitestを使用している）

cypress-io/cypress#28347
cypress-io/github-action#1081

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
We detected that you have versions of dependencies that are not officially supported:

 - `vite`. Expected ^2.0.0 || ^3.0.0 || ^4.0.0, found 5.0.0.

@KentaHizume
Copy link
Contributor Author

verbatimModuleSyntaxをfalseにした経緯

  1. （verbatimModuleSyntaxをtrueにした場合の挙動）type修飾子がついているimportはトランスパイル時に削除
  2. （問題）open-api-generatarがtype修飾子をつけてくれないので、verbatimModuleSyntaxをtrueにすると、型チェックでエラーになる
  3. （現状）verbatimModuleSyntaxをfalseにして型チェックを通す
    ただし、preserveValueImportsをfalse（=未使用のimportを削除）にすることで、トランスパイル時に参照のないコード（=本来type修飾子をつけるべきコード）は削除する
    ※既存の設定もpreserveValueImportsはfalseだったので、動作は変わらない

解決しきれていない点として、
importsNotUsedAsValuesとpreserveValueImportsの両方が非推奨となっているが、
現状importsNotUsedAsValuesを使っているとコンパイラがwarningを吐く一方で、
preserveValueImportsには警告が出ない。

https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax

@KentaHizume
Copy link
Contributor Author

KentaHizume commented May 21, 2024 •
edited
Loading

Cypress周辺の整理

関連issueと対応策、その理由をまとめる。

CypressがESMに対応していない

  • [CT] Fix Vite 5 CJS Deprecation Warning and Prepare for Vite 6 cypress-io/cypress#28373
    より正確には、CypressのComponent Test(CT)が、Vite 6で廃止予定のCJS関連のAPIを叩いているため警告が出てしまうという問題。E2E Testでは特に警告は出ない。
    DresscaではE2E機能を使っており、CT機能は使っていない（コンポーネントテストはVitestで行う）ので、対応は不要な想定。

cypress.config.js を cypress.config.ts にする

.tsに戻して問題ない。
というのも、#743でCypressが実行できなかった理由が、
正確にはCypressが内部でTSを実行するのに使用しているts-nodeが、
ソリューションスタイルのtsconfigをうまく読み込めないので、
ルートのtsconfigにcompilerOptions.moduleフィールドを設置しておく必要があるという制約によるものだったため。
create-vueのテンプレートの最新化を反映した際に、
compilerOptions.moduleを設定したため、tsに戻しても動作する想定。

CypressがESMに対応したら、tsconfigのmodule:NodeNextをやめる

元のパッケージで関連しているissueは、

tsconfigのmoduleにNodeNextが設定されている理由

上述の通り、tsconfigにcompilerOptions.moduleフィールドは必須だが、
設定値はNodeNextでなくても動作に問題はない。
create-vueのテンプレートでNodeNextを設定している理由は下記のように述べられているが、咀嚼しきれていない。
いまのところは、Node.jsで動作させるのでNodeNextに設定している、という解釈

// I use NodeNext here instead of ES2015 because that's what the actual environment is.

@KentaHizume
Copy link
Contributor Author

KentaHizume commented May 21, 2024 •
edited
Loading

Native ESM

Node.jsは最終的にCJSにトランスパイルして実行しているものと誤解していたが、
CJSとESM以外に、Native ESMという概念がある。

ESM 形式で記述されたファイルを、Node.js またはブラウザで直接 ESM として実行する方式またはそのファイル
https://quramy.medium.com/typescript-4-7-%E3%81%A8-native-node-js-esm-189753a19ba8

Node.js と TypeScriptのNative ESMサポート

ViteのNative ESM使用

  • ViteもNative ESMを使用している

https://zenn.dev/crsc1206/articles/0b0960fa306d71

ts-node

  • Node.jsでTypeScriptを実行するためのライブラリ

@fkoyama fkoyama linked a pull request May 24, 2024 that will close this issue
TypeScript・Viteの設定に関するドキュメントを追加する #1264
Merged
@KentaHizume KentaHizume mentioned this issue Jun 6, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@fkoyama fkoyama

Labels
None yet
Projects
None yet
Milestone
v0.9
Development

Successfully merging a pull request may close this issue.

TypeScript・Viteの設定に関するドキュメントを追加する AlesInfiny/maris
4 participants
@tsuna-can-se @1nu1taichi @fkoyama @KentaHizume