@Kei05posted at 2022-09-29

ViteでSCSSとTypeScriptを使えるプロジェクトを構築したい

Q&A

Closed

解決したいこと

以下のサイトを参考にしてViteでバニラのプロジェクトを作成しました。
https://zenn.dev/one_dock/articles/f694d8235cd388

ただ、テンプレートとはことなり、headタグ内で以下のようにファイルを読み込ませてビルドしましたが、scssはコンパイルされたものの、TypeScriptはコンパイルされませんでした。
※ビルドされたフォルダ内のindex.htmlの読み込み部分はindex.tsのままでした。

<link rel="stylesheet" href="src/scss/style.scss">
<script src="src/ts/index.ts" defer></script>

どのようにすれば正しくコンパイルできるのでしょうか。
テンプレートにあるtype="module"は使用せずにできないでしょうか？

tsconfig.jsonはisolatedModulesの設定をisolatedModules": falseに変更したのみです。

1Answer

@sinsky posted at 2022-09-30

@vitejs/plugin-legacyを使えばnomoduleのものもエクスポートしてくれるようですが、
type="module"が使えない理由があるのでしょうか？

0Like

Comments

@Kei05
Questioner
ご教示いただきありがとうございます。
返信おそくなり申し訳ありません。

> type="module"が使えない理由があるのでしょうか？
→使えない理由があるというわけではないですが、純粋にHTML, CSS, JavaScriptを使ったプロジェクトに対して、CSSはSCSSに、JavaScriptはTypeScriptに置き換えて進めたいといった経緯になります。
@sinsky
使えない理由がないのであれば気にせず使って良いかなと。
ECMAScriptにESModuleの機能が追加されているので、
ESModuleの機能を使ったとしてもJavaScriptを使っていることには変わりないので私なら普通に使います。

どうしても嫌だ、
ということであればviteではなくwebpackを使う方がいいですよ。
@Kei05
Questioner
かしこまりました
ESModuleについての知識が浅いのでここからさらってみます。

> どうしても嫌だ、
> ということであればviteではなくwebpackを使う方がいいですよ。
嫌ではないのですが、TypeScript初学者で単に型を明示するためだけにTypeScriptを使用しようとしていました。
（この発想自体が間違っていたらすみません。）
@sinsky
発想は問題ないと思いますよ
ちなみにwebpackでもtsはあるので一応貼っておきます
https://webpack.js.org/guides/typescript/
@Kei05
Questioner
早速webpackで試したところやりたいことができました！
ESModuleについても引き続き取り組んでみます。

ご丁寧に教えてくださりありがとうございました。

Are you sure you want to delete the question?

ViteでSCSSとTypeScriptを使えるプロジェクトを構築したい

解決したいこと

1Answer

Comments

Your answer might help someone💌