Comments (18)
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!
from esbuild.
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.
from esbuild.
For example, if you have a file called example.jsx
with the following contents:
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:
esbuild example.jsx --bundle '--define:process.env.NODE_ENV="development"' --outfile=out.js
Use this for a production build:
esbuild example.jsx --bundle '--define:process.env.NODE_ENV="production"' --minify --outfile=out.js
from esbuild.
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:
{
test: /\.(j|t)sx?$/,
include: [PATHS.src],
exclude: [PATHS.modules],
use: [
{
loader: 'esbuild-loader',
options: {
loader: 'tsx', // Or 'ts' if you don't need tsx
target: 'esnext'
}
}
]
},
from esbuild.
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 esbuild
with JSX.
from esbuild.
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 π
from esbuild.
Just using React with esbuild should be pretty simple:
-
Make sure all JSX syntax is put in .jsx files instead of .js files because esbuild uses the file extension to determine what syntax to parse.
-
If you're using TypeScript, run
tsc
first to convert .tsx files into either .jsx or .js files. -
If you're using esbuild to bundle React yourself instead of including it with a
<script>
tag in your HTML, you'll need to pass'--define:process.env.NODE_ENV="development"'
or'--define:process.env.NODE_ENV="production"'
to esbuild on the command line (see #12 for details).
If you're using Preact instead of React, you'll also need to pass --jsx-factory=preact.h --jsx-fragment=preact.Fragment
to esbuild on the command line.
from esbuild.
I'm creating a ESbuild-version of nano-react-app
to this repository
https://github.com/IlmariKu/esbuild-react-app
from esbuild.
@zaydek @bard I had to eject the app due to other circumstances. I only replaced the js loader & terser to esbuild loader though.
from esbuild.
Following @rw3iss suggestion, I was able to make CRA based project run blazing fast with esbuild π.
So far there is no problem yet, I will update this comment if I found something.
from esbuild.
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 esbuild-react
and an esbuild-svelte
variant.
from esbuild.
@immanuelfodor maybe Google must do that
from esbuild.
Sounds good, thumbs up for showing us the way! :)
from esbuild.
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).
from esbuild.
@josteph Can you share which repo?
from esbuild.
@josteph did you eject or did you use something like craco?
from esbuild.
I wanted to share with folks that you may not likely need to eject from create-react-app
to use features like ESbuild.
I highly recommend folks checkout
- react-app-rewired (what im using) OR
craco
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 create-react-app
team and the open source community π
from esbuild.
I wanted to share with folks that you may not likely need to eject from to use features like ESbuild.
I highly recommend folks checkoutcreate-react-app
- react-app-rewired (what im using) OR
cracoI 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 team and the open source community π
create-react-app
https://github.com/pradel/create-react-app-esbuild
from esbuild.
Related Issues (20)
- Tree shaking differs between splitting and no splitting
- Simple way to make an esbuild plugin that watches src directory recursively? HOT 2
- Run DCE without minify? HOT 4
- Explanation of colors in Bundle Size Analyzer HOT 1
- Compile to ES6? [Feature request] HOT 2
- Optionally disable CSS selectors renaming in local-css across entrypoints
- Error resolving an external transitive dependency when using pnpm HOT 4
- Import with wildcard HOT 2
- Inside docker, esbuild quietly exits with 0 when --serve is enabled HOT 4
- Build failing in Dockerfile but works on local Windows machine
- Broken automatic JSX transform HOT 7
- ERROR: Expected "*/" to terminate multi-line comment HOT 2
- Expected ";" but found "const" - typescript transformer HOT 2
- Option to disable injected comment of input path file HOT 2
- Additional directories to watch HOT 3
- esbuild does not fail with undefined functions HOT 5
- Segmentation fault when using with vite and sveltekit project HOT 1
- Glob imports must match exactly
- Pass argument to IIFE HOT 2
- Esbuild causing bundle breakage when applied twice to the same bundle
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from esbuild.