CODEWITHSUNDEEP
typescriptwebpackbundling-and-minificationweb-frontend
Qwertie
Qwertie

Reputation: 17196

TypeScript: how to optimize compile-bundle-reload cycle?

I just set up a trivial TypeScript project with React & Webpack and the edit-build-reload-test cycle isn't ideal since I have to

  1. Rebuild manually with npm run build:dev
  2. Wait 9 seconds for tsc && webpack app.js -o app.bundle.js --mode=development
  3. Refresh the browser.

Fellow coders, what techniques do you use to get a faster workflow? (non-webpack solutions welcome!)

Upvotes: 1

Views: 1445

Answers (2)

Qwertie
Qwertie

Reputation: 17196

I just found out about Parcel. It is by far the easiest way to get a fast workflow...

enter image description here

Just add a <script src="app.tsx"></script> reference to your html file and then run parcel index.html (or whatever). Parcel

  1. Checks if you have a package.json and if not, creates one for you
  2. Installs TypeScript (with --save-dev) if that's the language you're using
  3. Installs React or Preact if you imported one of those
  4. Creates a bundle of your app with its dependencies in a dist folder
  5. Serves your app at http://localhost:1234
  6. Watches for code changes and recompiles (in less than 200ms for a tiny app)
  7. Pushes changes out to the web browser automatically with Hot Module Replacement.

Upvotes: 0

eldarg
eldarg

Reputation: 308

You can use ts-loader (or awesome-typescript-loader) to allow webpack process your typescript files.

Also, webpack can be run with --watch option, which allows webpack to watch for files changes and rebuild bundle automatically

webpack can watch files and recompile whenever they change.

In this case your build:dev script would be webpack app.js -o app.bundle.js --mode=development --watch (without running tsc)

PS. you can also faster the refreshing phase by enabling Hot Module Replacement so you don't need to reload the page manually (it can even preserve the state), but it would require some changes in the codebase (for react, react-hot-loader is recommended), though it would additionally require to use babel-loader in your webpack config.

Upvotes: 1

Related Questions