vite x react x typescriptの構成を作りたいメモ

viteはそのままtypesciptに対応している

ドキュメントに、「Vite supports importing .ts files out of the box.」と記載があったが本当だった。

<!-- index.html -->
<p>Hello world</p>
<script type="module" src="/src/main.ts"></script>

// src/main.ts
type Item = {
  name: string;
  price: number;
};

const apple = {
  name: "apple",
  price: 200,
};

console.log(apple.name);

として、アクセスすると、コンソールに「apple」としっかり表示されてるし、
ネットワークタブからも、しっかりjavascriptにトランスパイルされたものが返ってきているのが確認できる。

viteでの、typescriptやjsxのトランスパイルはesbuildがやってくれてるぽい。
webpackだと自前でやってるみたい？だから、バンドラとしてのesbuildが独立して開発できるのは良さそう。
babel,swcがトランスパイラで.
esbuildがバンドラ兼トランスパイラ。goで書かれてて速い.
vite,webpackがこの辺をまとめて、開発サーバーとかも提供してくれてるやつ

こんな理解でいいのかな