Working with ts/tsx files directly by using script type="module" in the web app (browser)

Question

Using vite dev server allows me to use tsx/ts files directly (without packing and even transpiling!)

<script type="module" src="../client/main.tsx"></script>

Typescript files are transformed on the fly:

This is really fast and speeds up developent Two questions:

1. Looks like this is only for development. Can I use it in production? (embed in server app)
2. Is it possible to achieve the same results using webpack (dev server)?

Answer 1

Vite is a great framework for development. However, for production, it bundles the code with Rollup to support older browsers. You can read more here. If you're using SSR, you need to create two separate builds. Vite will still modify the HTML on the fly on the server-side, but the JS will still be bundled. I haven't tried using ESM in production, but you should be able to serve your transpiled (but still ESM) source files statically after being built with something like ESBuild. However, bundling can help with file size and request waterfall issues. Vite is mainly for the purpose of developer experience and satisfaction with a huge bonus on speed.

Webpack, however, is not built for this purpose. Webpack is solely a bundler, whereas Vite is a development framework. Webpack dev server watches for changes within your code and then re-bundles the files. Webpack is focused on large projects with many dependencies, whereas Vite is focused on modern concepts.