New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React Example #7
Comments
This. When I saw that incredible benchmark in the readme, I just said, wow, we seriously need it for React build. If you make an example app happen, I think we'll consider migrating to your hobby project as a company 😃 |
I've never used create-react-app before but from what I understand, it's basically a customized webpack config. It's not possible to use esbuild to replace a webpack config generated with create-react-app because it includes a lot of things that esbuild doesn't implement. For example, it appears to support processing CSS in .css/sass/scss files as well as inlining .bmp/gif/jpg/png files as base64 URLs. It also seems to enable JSX syntax in .js files while esbuild requires you to use the .jsx extension. I'm not trying to have esbuild replace webpack. If you need the complexity of create-react-app/webpack, then you're not going to be able to use esbuild. I'm only intending for esbuild to be appropriate for a certain sweet spot of use cases. Currently this is just bundling JavaScript/JSX files that use CommonJS/ES6 modules. In the future, it will hopefully also include bundling TypeScript files and maybe CSS files. If I get to implementing all of that, it may be possible to manually port an app that uses create-react-app to esbuild, but it may take significant effort depending on how many custom webpack features it uses. |
If you would try to replace webpack, and you succeed to "reimplement" it in Go, you'd get famous, go to conferences, etc. This is a real opportunity here, you're one step ahead of everybody, and it fills a need in the market. But fair enough, it's your project, it seems you have clear vision about what you want to do with it. I just don't get if you have the talent to accomplish this already, why not make it something truly earthshaking. No matter what, I wish you all the luck you can master, great job what you did here, the most amazing build optimization I've seen in some time! |
@immanuelfodor maybe Google must do that |
Sooner or later somebody will definitely implement it. 100x increase in build time is well worth the effort. There was another issue for Svelte use case (#8), so I feel even two forks of this repo could coexist: an |
You guys might be missing the point. Webpack has 10,472 commits and 585 contributors over the past 7 years. Re-writing that in Go from the ground up is not trivial. The same goes for any JS build tool. You would have to re-write it in Go from the ground up. I'm already impressed that @evanw is planning Typescript support. Now, something like transpiling JSX is much simpler. The React guys explain it well. JSX converts directly to function calls in a straightforward way. I think a React example is a good idea. It doesn't have to be Create-React-App. It can just showcase how to run |
Sounds good, thumbs up for showing us the way! :) |
Just using React with esbuild should be pretty simple:
If you're using Preact instead of React, you'll also need to pass |
For example, if you have a file called import * as React from 'react'
import * as ReactDOM from 'react-dom'
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
); Use this for a development build:
Use this for a production build:
|
FYI, for anyone else wanting to replace webpack for a faster building, you don't really have to. Just use the esbuild-loader package, and it will work. The livereload isn't any faster, but it will still build the JS/TS faster, ie:
|
I'm creating a ESbuild-version of |
I’m also messing around with a kind of CRA using esbuild: https://github.com/zaydek/react-ssg. I’m also experimenting with SSG so it’s sort of a CSR / SSG hybrid (SSG for prerendered pages, CRA for everything else). |
Following @rw3iss suggestion, I was able to make CRA based project run blazing fast with esbuild 👍. |
@josteph Can you share which repo? |
@josteph did you eject or did you use something like craco? |
I wanted to share with folks that you may not likely need to eject from
I was working on a codebase for a few months and its been a PITA maintaining a custom build setup. I like receiving free bug fixes & performance improvements from the upstream |
|
We need an easy to follow example.
I would suggest a Create-React-App project built using esbuild as an example, this will onboard most of us to esbuild.
The text was updated successfully, but these errors were encountered: