https://github.com/linbudu599/esbuild-react-app

ESBuild powered react application(from CRA template)
https://github.com/linbudu599/esbuild-react-app

Last synced: 27 days ago
JSON representation

ESBuild powered react application(from CRA template)

• Host: GitHub
• URL: https://github.com/linbudu599/esbuild-react-app
• Owner: linbudu599
• License: mit
• Created: 2021-11-09T10:30:33.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-01-31T23:31:31.000Z (almost 2 years ago)
• Last Synced: 2023-03-03T07:25:08.675Z (over 1 year ago)
• Language: JavaScript
• Size: 1.62 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ESBuild + React App

This project is a sample project showing how to use [ESBuild](https://esbuild.github.io/) as a compiler in React project, including **the configuration of React, ReactDOM mounts under window via plugins with precompiled files**, and **the required [ESBuild build options](https://esbuild.github.io/api/#simple-options)**, and the `Live-Server` etc.

You can refer to the [build.ts](build.ts) and [plugin.ts](preserve-external-dep.plugin.ts) files to learn how to use ESBuild for simple replacements of Webpack.

**Note: This project has not been validated in a production environment, and it is not recommended that you do so.**

## Get Started

```bash

yarn

# execute build script, and use serve to start up a server.

yarn start

```

## Further

As ESBuild does not implement a module system like Webpack, the [`external`](https://esbuild.github.io/api/#external) property in ESBuild will in some cases not behave the same way as it does under a Webpack project.

In Webpack project, we've gotten used to the idea that webpack can handle mount under `window` with the related configuration, which will automatically inject code like `module.exports = React` into the compiled code, and the application code will refer to `window` when it executes `require("react")`.

So to archive this in ESBuild, we use an extra file in this project, packaged as `inject.js`, which contains the source code for `React`, `ReactDOM`, and mounts it under `window` at the end of the file. Then, we convert the application's import of react to go under `window`.

To ensure that the variables are mounted before the application is loaded, we need to ensure that `inject.js` is executed before `index.js`. In fact, a more common way to do this would be to use a CDN to do the `inject.js` work.