Skip to content

Latest commit

 

History

History
59 lines (42 loc) · 4.93 KB

README.md

File metadata and controls

59 lines (42 loc) · 4.93 KB
Raw

esbuild

A bare-bones React and TypeScript project built with esbuild.

Overview

This is a bare-bones setup for a React and TypeScript project. esbuild is an enabler for such a simple setup. The project includes foundational components and omits optional ones:

Component Notes
✓ Includes NPM footprint (package.json) It would be awkward to omit NPM because we need dependency management beyond manually downloading and unzipping .tar files.
✓ Includes DefinitelyTyped The TypeScript type packages for React are required. I've always found this awkward, because wouldn't it be best for React to provide their own type definitions? There's no way around this. This is not a dig on DefinitelyTyped!
✓ Includes esbuild We need something to transpile TypeScript and TSX to JavaScript code that works in the browser. We're using esbuild in place of webpack and webpack loaders.
✓ Includes tsconfig.json esbuild requires a tsconfig.json file for TypeScript rules. There's no way around it.
Omits a linter For a demo project, let's omit the linter. There are ESLint configuration files in this repo.
Omits A TypeScript type checker This is the most significant omission of the bunch. esbuild is not a type checker. You need to reach for the official TypeScript compiler to do that. I'm getting type feedback from my IDE. This is effective!
Omits A development web-server library This is a bit facetious. esbuild comes with its own web server, but it's nice pointing out that you don't need to specify an additional dependency declaration to get a web server for development.
Omits Tests There are no tests! The "test" is the developer running the build, verifying the visuals on the web page, and verifying the lack of errors in the console. Consider writing automated tests for significant projects. By contrast, consider when writing tests is the wrong move.

Remember, this is a "bare-bones" setup. If I was going to build a larger project then I would use webpack.

Instructions

Follow these instructions to build and serve the program:

  1. Install the dependencies 
    • npm install
  2. Serve the content (and build continuously) 
    • npm start
  3. Open the browser

Wish List

General clean-ups, todos and things I wish to implement for this project:

  • DONE Add a component library to make the example more interesting and really exercise the bundler and showcase the experience. I think I'll add Ant Design, I like look of it, and it's extremely popular (by stars at least).
  • DONE Consider figuring out source maps
  • DONE Show how to bundle CSS. While I don't really need this in this project because Ant Design uses CSS-in-JS, it is a common use case and I want to figure out how to do it idiomatically in esbuild.

Reference