How can Babel be used without bundler, but with a dev-experience similar to webpack?

Question

I'm trying to build a new project with ES6 modules without bundling. I still want to use babel-7 to translate TypeScript and JSX to JS. I find it hard to figure out how to set up a development-server for it. I couldn't find any kind of "babel-dev-server" that works similar to webpack-dev-server (hot-module-reloading, browser-sync, file-watcher).

One possibility would be to use browser sync as a static server on e.g. dist and run something like babel src --out-dir dist --watch in parallel. But this excludes hot-reloading and seems a bit clumsy to me. Besides, it would still be useful for build- and dev-steps if you could give the JS-files a hash to control caching better. Or can I configure a build-tool like webpack so that it doesn't perform bundling but still performs some transformations (like putting the hashs in the filenames in imports)?

Answer 1

With the latest release of Snowpack (formerly @pika/web) this should be possible now!

From their website:

TL;DR - With Snowpack you can build modern web apps (using React, Vue, etc.) without a bundler (like Webpack, Parcel, Rollup). No more waiting for your bundler to rebuild your site every time you hit save. Instead, every change is reflected in the browser instantly.

And their "How it Works":

1. Instead of bundling on every change, just run Snowpack once right after npm install.
2. Snowpack re-installs your dependencies as single JS files to a new web_modules/ directory. It never touches your source code.
3. Write code, import those dependencies via an ESM import, and then run it all in the browser.
4. Skip the bundle step and see your changes reflected in the browser immediately after hitting save.
5. Keep using your favorite web frameworks and build tools! Babel & TypeScript supported.

check https://www.snowpack.dev/ for more information, they have done a great job with their documentation, it looks really promising!