evanw / esbuild Goto Github PK
View Code? Open in Web Editor NEWAn extremely fast bundler for the web
Home Page: https://esbuild.github.io/
License: MIT License
An extremely fast bundler for the web
Home Page: https://esbuild.github.io/
License: MIT License
Is it possible to publish a unique NPM package?
Hi there! I wanted to propose adding the following badge to the README to indicate how many TODO
comments are in this codebase:
The badge links to tickgit.com
which is a free service that indexes and displays TODO comments in public github repos. It can help surface latent work and be a way for contributors to find areas of code to improve, that might not be otherwise documented.
The markdown is:
[![TODOs](https://badgen.net/https/api.tickgit.com/badgen/github.comgithub.com/evanw/esbuild)](https://www.tickgit.com/browse?repo=github.com/evanw/esbuild)
Thanks for considering, feel free to close this issue if it's not appropriate or you prefer not to!
Using ES6 Modules with main.js
import lib from "./lib.js"
console.log(lib());
export default () => "main";
lib.js
export default () => "Hello, World!";
Using command esbuild --bundle --outfile=bundle.js main.js
Then loading the bundle.js file in Node.js i see the Hello World being printed so lib.js got imported successfully however the main.js also exported a function that i cannot use from Node.js it should've been exported. Cannot reproduce this with rollup.
(Another comment: the bundle is pretty big compared to what rollup produces for the code i mentioned do we really need all that stuff?)
Support code splitting on dynamic import() statements, and additionally split/join on shared bundles for shared dependency models.
As a curious developer,
In order to try out esbuild on an existing project,
I'd like to be able to run esbuild without first renaming a lot of files.
Given that the React projects I've seen so far used .js everywhere (because for .jsx other tools just didn't work), would a command line option be very bad? It could be named --accept-slowdown-treat-all-js-as-jsx :) or maybe just --jsx or something?
Even if not supporting the likes of CSS transforms (sass/less), it would be nice if you added support for referencing static assets like images, etc. Can simply hold a reference, and output to the dist directory with originalname.hash.ext ... and then put the output path into the JS... that output path should probably be configurable as well... such as / (default), or /assets via configuration, etc.
This is what a lot of bundlers are doing for most things. Inlining and (s)css support would probably be natural followup support.
got following error
Uncaught TypeError: Cannot read property 'object' of undefined
at 1211 (index.js:172538)
at require (index.js:13)
at index.js:27
at index.js:28
compilled code
// ../node_modules/rc-animate/es/CSSMotion.js
const defineProperty = require(330 /* babel-runtime/helpers/defineProperty */), extends2 = require(331 /* babel-runtime/helpers/extends */), classCallCheck = require(328 /* babel-runtime/helpers/classCallCheck */), createClass = require(329 /* babel-runtime/helpers/createClass */), possibleConstructorReturn = require(335 /* babel-runtime/helpers/possibleConstructorReturn */), inherits = require(333 /* babel-runtime/helpers/inherits */), react = require(1166 /* react */), prop_types = require(839 /* prop-types */), react_lifecycles_compat2 = require(1151 /* react-lifecycles-compat */), classnames5 = require(426 /* classnames */), raf = require(841 /* raf */);
var STATUS_NONE = "none";
var STATUS_APPEAR = "appear";
var STATUS_ENTER = "enter";
var STATUS_LEAVE = "leave";
var MotionPropTypes = {
eventProps: prop_types.default.object, // error here can not get object of undefined
// ^^^^^^^^^^^
original one
import React from 'react';
import PropTypes from 'prop-types';
import { polyfill } from 'react-lifecycles-compat';
import findDOMNode from 'rc-util/es/Dom/findDOMNode';
import classNames from 'classnames';
import raf from 'raf';
import { getTransitionName, animationEndName, transitionEndName, supportTransition } from './util/motion';
var STATUS_NONE = 'none';
var STATUS_APPEAR = 'appear';
var STATUS_ENTER = 'enter';
var STATUS_LEAVE = 'leave';
export var MotionPropTypes = {
eventProps: PropTypes.object, // Internal usage. Only pass by CSSMotionList
visible: PropTypes.bool,
prop-types code
if (process.env.NODE_ENV !== 'production') {
var ReactIs = require('react-is');
// By explicitly using `prop-types` you are opting into new development behavior.
// http://fb.me/prop-types-in-prod
var throwOnDirectAccess = true;
module.exports = require('./factoryWithTypeCheckers')(ReactIs.isElement, throwOnDirectAccess);
} else {
// By explicitly using `prop-types` you are opting into new production behavior.
// http://fb.me/prop-types-in-prod
module.exports = require('./factoryWithThrowingShims')();
}
This is caused by UI library ant.d which i use for my project.
I want esbuild to demonstrate that it's possible for a normal web development workflow to have high-performance tools. I consider bundling CSS modules a part of my initial MVP feature set for esbuild since some form of CSS modularity is essential for a large-scale web app and I find CSS modules an elegant solution. This issue tracks the CSS module bundling part of my MVP.
At the bare minimum, importing a CSS file should ensure it's included in the bundle. I plan to also implement CSS modules, which makes CSS selector names local to the file and allows JavaScript to import the selector names as strings.
There are interesting extensions to think about once I get everything working. Tree shaking of unused CSS is an optimization that seems worth exploring, for example. That should be possible with CSS modules since unused imports correspond to unused CSS.
The following code
function foob(a) {
return (a || 'one') + 'two';
}
gets translated to
function foob(a) {
return a || "onetwo";
}
I've tested it with esbuild
built from the sources from the master branch.
I am observing that the dynamic import function is being incorrectly minified.
// test.js
(async () => {
await import('./x.js')
})()
Run: esbuild --minify test.js
Expected output:
(async()=>{await import("./x.js")})();
Actual output:
(async()=>{await a("./x.js")})();
I think use docker image for build javascript is a great idea. Not need a more type of esbuild anymore (win/mac/linux) Just only say: docker run -v$(pwd):/usr/local/app esbuild:latest
and the magic happened...
What do you think about this idea
Getting error:
error: Invalid define: --define:process.env.NODE_ENV=development
When executing the react example with:
esbuild index.jsx --bundle '--define:process.env.NODE_ENV="development"' --outfile=out.js
OS: Windows
This works:
import KJUR from 'jsrsasign';
import { b64toBA, b64utob64 } from 'jsrsasign';
This doesn't:
import { KJUR, b64toBA, b64utob64 } from 'jsrsasign';
KJUR
is a namespace, while the others are functions or classes.
Webpack handles this as expected.
Greetings,
First of all, thanks for the wonderful work.
By the time of writing, looking at the other issues, I realize that most of the requests are based on the habits & biases that the intensive use of webpack of the past years has introduced to us – and consequently, on the existing code base we have written. And my request lie in the same category.
I tried to use esbuild
on my current project that is using webpack, hop(p)ing to benefit from really faster build time, which makes the extensive use of aliases in my imports (such as '@'
for path.resolve(__dirname, 'src')
) which is not supported by esbuild
yet.
My request is to introduce an option to define aliases.
However I would strongly understand a rejection, as esbuild
would not be a Webpack written in Go 😄
Best,
François
Would this be possible?
So that also both script tag types are supported (type=module and standard globals ones)
esbuild
looks promising, I want ask if there is there a support for angular applications, or do you plan to support angular application?
Is there any way to use a front-end library like Svellte in this bundle?
It would be great if we could reuse parts of it. In particular I'd like to reuse the parser part.
Also crazy fast, written on rust
https://github.com/nathan/pax
Dynamic import with template literals problem. Used [email protected]
.
// x.js
export const a = 1;
// test.js
(async () => {
await import(`./x.js`);
})();
Run: esbuild --bundle test.js --outfile=build.js
Expected output:
Wrote to build.js
Actual output:
test.js:2:17: error: The argument to import() must be a string literal
There's already a tool there called swc which I think it covers some part of this project. Maybe it's valuable to sync up with them as they might have already covered some part of this project.
I would like to hear your opinion! Thanks!
GOPATH maybe removed from Go some point and go module is the future.
This is a feature request from a friend. Logging it here so I don't forget.
When bundling, have a way to add a prefix and/or suffix JavaScript file that is guaranteed to come before or after the bundle. These files would also generate source maps and would also interact with --define
. This could be used to, for example, measure how long the execution time of the bundle took by saving performance.now()
before and after the entry point executes.
I tried to build ProseMirror basic editor and stumbled upon a bug in esbuild
.
So in that example, prosemirror-model
module is imported, which contains the following code in dist/index.js
:
for (var name in schema.marks) loop( name );
var loop$1 = function ( name ) {
var rules$1 = schema.nodes[name$1].spec.parseDOM;
if (rules$1) { rules$1.forEach(function (rule) {
insert(rule = copy(rule));
rule.node = name$1;
}); }
};
for (var name$1 in schema.nodes) loop$1();
esbuild
translates it to
for (var name in schema.marks)
loop(name);
var loop$1 = function(name2) {
var rules$1 = schema.nodes[name$1].spec.parseDOM;
if (rules$1) {
rules$1.forEach(function(rule) {
insert(rule = copy(rule));
rule.node = name$1;
});
}
};
for (var name$12 in schema.nodes)
loop$1();
return result;
which produces the following error:
Uncaught ReferenceError: name$1 is not defined at loop$1
I've built esbuild
from the sources from the master branch.
I also simplified this code, so you can reproduce the error more easily. I'll post it in the next message.
By the way, I'm using esbuild
in production and so far it works perfectly fine. Thanks for such a tool!
Node supports wasm, if we could build this to wasm then it could be packaged up into a npm dependency that might be adopted by the web community. Wasm might give a slight slow down but it should still be an order of magnitude faster than other options still.
Repro:
if (something) {
let x = foo(something)
// console.log(x)
}
Build with:
esbuild --minify --outfile=test.out.js test.js
Expected output:
if(something){let b=foo(something);}
Actual output:
if(something)let b=foo(something);
Running this in Chrome js console yields this error:
Uncaught SyntaxError: Lexical declaration cannot appear in a single-statement context
Alternatively, the “let” is reduced to nothing (since it's unused) in the expected case:
if(something)foo(something);
Private fields are Stage3 proposal, supported by major browsers https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_fields. Any plans to support it?
In a VueJS project I did :
esbuild --bundle . --outdir=dist --minify
I got :
src/main.js:3:16: error: File extension not supported: /home/jeff/gitclones/vuejs-project/src/App.vue
import App from './App.vue'
...
Nice work on this project! Very cool results ;-)
If you're interested, do you think it would be possible to integrate this with https://github.com/tdewolff/minify (i.e. replace the JS minifier)? I have very limited time lately, and I've been promising an improved JS minifier for a while now. This project seems like a great replacement of the current JS minifier I have.
The minifiers work on a file-by-file basis (so no bundling, just minifying). Do you have an idea how I could minify a byte-slice using esbuild
? What do you think?
Hello.
Gorgeous project, I'm deeply impressed 😄
As this project is written in Go, I assume later we can embed functionality into Go application, which we can fully care for Web project in Go! (and I assume you are already doing it partially)
For that purpose as this project already parsing node_modules/
directory, I assume why not just add more features like this;
package.json
node_modules/
directorypackage.json
Then we can use Go for full stack web development ! (maybe for the complex one we still need to separate frontend with backend, but we have an option)
As this project parse only for web modules, it would not that be easy task; but I think it is worth it. Any thoughts?
Hey, this project looks awesome! I actually was tinkering in this same space with similar motivations and wrote my own lexer/parser/minifier. I was more focused on minification than bundling (I only worked with single-file inputs) but it's still a lot of the same problems -- I even used "a popular library concatted with itself 10x" as my initial test just like you did!
What I discovered in my attempt is that it ends up being hard to
Because of those problems, I set my project aside and instead spent some time trying to come up with an approach to that problem. I built a sort of mini-framework that lets you plug in multiple JS minifiers side by side and measure their performance across some apps. And to deal with #2 it also tries to run end-to-end tests with the minifier's output as well (which is something I realized is necessary).
You can find it here:
https://github.com/evmar/js-min-bench
with some output here:
https://evmar.github.io/js-min-bench/
I think you might be able to drop your program in there into this list of tools:
https://github.com/evmar/js-min-bench/blob/master/src/metadata.ts#L103
and then either run the command in the readme (which runs everything) or run with some flags to just run the tools you care about:
https://github.com/evmar/js-min-bench/blob/master/src/run.ts#L98-L110
As the sort of value it brings, for example I patched out the minification from React (and other libraries') build process to let you plug in yours:
https://github.com/evmar/js-min-bench/tree/master/third_party/react
Even if you don't find it useful, I'd love to get your thoughts on why not, or what would have been more useful. I ended up a little bummed that I started with the fun thing (the fast lexer) and ended up mired in measurement and build processes, but I guess that is how this kind of project goes...
$ esbuild --bundle --outdir=dist --minify --sourcemap src/main.js
node_modules/axios/lib/defaults.js:23:22: error: Could not resolve "./adapters/http"
adapter = require('./adapters/http');
1 error
$ ls -l node_modules/axios/lib/adapters/http.js
-rwxr-xr-x. 1 daver daver 9308 Jan 27 09:42 node_modules/axios/lib/adapters/http.js
I want esbuild to demonstrate that it's possible for a normal web development workflow to have high-performance tools. I consider converting TypeScript to JavaScript a part of my initial MVP feature set for esbuild since I use TypeScript for all of my web development projects. This issue tracks the TypeScript syntax part of my MVP.
This task is tricky because TypeScript is a constantly moving target without a spec. My current plan is to get esbuild's output as close as reasonably possible to tsc's and then run every TypeScript source file I can find through esbuild and tsc and compare the output.
This is currently a work in progress on the ts branch. I will close this issue when I can parse the vast majority of TypeScript files, even though I might not be able to parse every single TypeScript file. For example, I may close this issue before being able to parse TypeScript decorator syntax, since I don't use that in any of my projects.
Just an obvious request, it would be nice if we could use a config file for defining the bundler options/parameters, like we have in other JavaScript bundlers (webpack.config.js, rollup.config.js, etc).
And nice work man, I'm looking forward for this project!
Regards.
I want esbuild to demonstrate that it's possible for a normal web development workflow to have high-performance tools. I consider watch mode a part of my initial MVP feature set for esbuild since I believe development builds should be virtually instant. This issue tracks the watch mode part of my MVP.
Watch mode involves automatically rebuilding when files on disk have been changed. While esbuild is much faster than other bundlers, very large code bases may still take around a second to build. I consider that too long for a development workflow. Watch mode will keep the previous build in memory and only rebuild the changed files between builds.
This may or may not involve disabling certain cross-file optimizations while in watch mode depending on what the performance looks like. I may also implement a local HTTP server that can be queried for the latest build, which is a nice way to avoid a page reload accidentally picking up a stale build.
Good afternoon Evan,
I'm a CS / math student in New York and I use your finite state machine designer almost every day (not only for automata). It's a life saver. I love it!!
I'm a huge fan.
I had some questions for you about your path as a developer, because the work on your website is really great and inspiring. I didn't know where else to ask for some way to contact you. I'm not familiar with sending messages to other users on GitHub, and I couldn't find any contact information on your website. Originally, I came here to ask for the source code to the fsm, but then thought "Wait, we're on GitHub..."
So, here we are in esbuild/issues!
Enjoy your day and stay healthy
~ Jake
Now created bundle has commonjs format.
Is there any way to set bundle format to esm
?
I've tried to use esbuild
. It is impressively fast :)
But i faced issue with env variables.
Once i run compiled code i got following error:
Uncaught ReferenceError: process is not defined
I looked into line were error occurred
"use strict";
if (process.env.NODE_ENV === "production") {
module.exports = require(1172 /* ./cjs/react.production.min.js */);
} else {
module.exports = require(1171 /* ./cjs/react.development.js */);
}
Webpack has a externals option that provides a way of excluding dependencies from the bundle, it's useful when you use a library on development, but you don't want it on your bundle because it'll be available on the production environment.
There's this JQuery use case, but it'll be also useful if you plan to support Node, where some dependencies can be available in the runtime environment like we see on serverless platforms.
Webpack (and via extension, Parcel) support outputting a bundle analysis which shows visually the relative size of the modules of the built package, which is very useful for isolating problem areas.
Hey, nice project.
Is this node compatible? I am guessing not:-
error: Could not resolve "fs"
const fs = require('fs');
I gave my app a test build but it's failing every time with
error: The argument to require() must be a string literal
The above error originates from libraries within node_modules
directory.
To test if I could get past these errors, I changed to string literals in the lib and it still results in the same error.
@evanw this project is awesome!
I love rollup, but I'm disappointed that when I run my build process on a 2015 macbook laptop vs a 2019 desktop with 8 cores, a ton of ram, and a pci-e drive I get almost identical build times. Clearly performance and parallelism is a problem here in defacto bunder land.
All joking aside in the title, can you envision a way that babel could be used with esbuild?
@evanw, are you planning to add tree shaking to exclude unused code from bundles?
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.
Hi,
First of all, I would like to say I appreciate your effect and the project. Good Job! I love open source myself and love seeing people do some awesome stuff! Keep up!
That said, I would like to suggest to set up a proper benching for FuseBox with the latest version. The @next
version is outdated since it has undergone a full a refactor and I am publishing it with the alpha
tag
FuseBox now has its own custom compiler that managed to pass your bench in 6 seconds. And it will be even faster when we publish it.
If possible, could you include development builds?
Production versions are always slower for a reason. After all, development experience is what matters most.
FUSEBOX_RUN += require('fuse-box').fusebox({
FUSEBOX_RUN += target: 'browser',
FUSEBOX_RUN += hmr: false,
FUSEBOX_RUN += devServer : false,
FUSEBOX_RUN += watcher : false,
FUSEBOX_RUN += logging: {level : 'disabled'},
FUSEBOX_RUN += entry: './fusebox-entry.js',
FUSEBOX_RUN += }).runDev({ bundles : {app : 'app.js'}});
Results:
real 6.01
user 7.22
sys 0.57
FUSEBOX_RUN += require('fuse-box').fusebox({
FUSEBOX_RUN += target: 'browser',
FUSEBOX_RUN += logging: {level : 'disabled'},
FUSEBOX_RUN += entry: './fusebox-entry.js',
FUSEBOX_RUN += }).runProd({ bundles : {app : 'app.js'}});
results:
real 30.89
user 44.42
I'd really appreciate the above-mentioned fixes to the benches and updated stats.
Thanks ;-)
I tried using --define to remove line breaks, but it didn't work - maybe add it as an option?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.