Ask anything to Babel Team

11 September 2017, 6:00 pmAsk Question

Babel is a JavaScript compiler. It lets you use next generation JavaScript, today. It's pluggable, debuggable and is being adopted by many popular companies such as Facebook, NetFlix, PayPal and more.

Ask Babel Team about:

  • Babel
  • Future of JavaScript
  • ECMAScript
  • TC39
  • Maintaining OSS
  • Contributing to OSS
  • Plugin Ecosystem
  • Releases

Hosted by:


Thanks for participating and asking the questions!

If you want to get more involved:

Comments (116)

Kent C. Dodds's photo

How do you all manage to be so awesome?

Show +2 replies
Henry's photo

Maintaining @babel

Not thinking about being awesome and working on things for the future/vision of what they can be. Balancing learning to do things out of joy/passion while doing things I know are good for me but I don't want to do - aka. practice

Brian Ng's photo

Hanging out and working alongside awesome people 💯

Duane Rivera's photo

How can one join the core maintainers team?

Henry's photo

Maintaining @babel

If you are a contributor that seems to be invested in the project itself and not just your own issues/bugs/requests then you can probably join as a maintainer.

Although I'd probably ask, "Why do you want to be a maintainer"? (not to push anyone away). It's a question I (should) ask myself periodically. What kinds of things do maintainers do? I talk about this somewhat in my two talks: https://github.com/hzoo/maintaining-an-oss-project, https://github.com/hzoo/so-how-does-babel-even-work. It's not the most glorious thing, a lot of the work may seem tedious, github issues and dealing with people can be draining, and you end up not really writing that much code but doing a lot of project management.

For me personally though, it is worth it and fulfilling. It's an opportunity to learn JavaScript, getting involved in a programming community, learn many aspects of software engineering, and to serve others.

Paul Melero's photo

What are the biggest (technical and not technical) problems you are experiencing right now?

Logan Smyth's photo

@babeljs maintainer, general JS dev, currently loving Rust

The biggest questions/problems at the forefront of my mind are probably:

  • How do we improve Babel's API so that it has fewer rough edges and foot guns?
  • How do we keep Babel useful as people use fewer ES6 transforms because environments support them?
  • How do we ensure that Babel's community stays active and evolves over time rather than stagnating?

I'd say we also have a lot of the same issues other volunteer-based open source projects have, e.g.

  • Who reviews PRs?
  • How do we ensure that PRs don't just sit forever / who gets to say "we're not accepting this"?
  • Who gets final say when we disagree on the direction/solution to something?
  • How do we encourage new people to join to help out?
  • How do we prevent burnout, since many people help with Babel alongside their full-time job?
  • What is the best way to reinvest donated money into Babel's community without introducing conflicts?
Joy Dasgupta's photo

When implementing a new spec, how closely does babel stick to it? Does it add any extra things to the feature?

Henry's photo

Maintaining @babel

Good question!

I made a new repo: https://github.com/babel/proposals to track the progess/implementation of new proposals. Also partially answered the question in https://github.com/babel/proposals#when-does-babel-implement-new-features.

We try to stick to the "spec" as close as possible, especially now as we are working more with TC39 itself and ask them to review. Sometimes there is no spec yet anyway because it's a Stage 0/1 feature so the implementation will also inform the spec, etc. No, we don't add anything to the feature.

We may move out somethings that are too slow to a "spec" option in the plugin, and possible non-spec behavior to a "loose" option but we intend to keep the default behavior as close as reasonable to the spec behavior. A reason for this is simply that when browsers implement the spec and people use babel-preset-env to not compile supported syntax (or just not use Babel anymore), it will seamlessly work without any transition issues. For those that need a faster output (code size/speed), we will allow those people to knowingly opt-in to non-spec behavior.

Jason Palmer's photo

Is there any talk about Babel being more involved in bundling? Babel already does a great job converting es6 imports to require but the bundling side has to defer to webpack/rollup/browserify. Would be great if one tool managed all this.

Justin Ridgewell's photo

There're no internal discussions on it yet, but it's something I've thought of tackling a few times. I've written a few advanced introspection features for personal projects that break down at the module boundaries due to babel being only a per-file transformer, and there are definitely other cool things that could be accomplished with a full project level transform.

Just don't expect it in the short time, though. We're already fully loaded just trying to keep up with the syntax transforms.

Anup's photo

Compilers are something which I really want to learn about. Is there any good resources where I can learn about how Babel works?

Logan Smyth's photo

@babeljs maintainer, general JS dev, currently loving Rust

I think it is mostly a question of which parts of compilation you want to learn. Babel is a pipeline for source-to-source code transformation, which means it is suited well for cases like compilation of ES* features. Most low-level compiler toolchains are going to do a lot more than that because they are converting from source code into a lower-level representation, whether that's LLVM's IR or bytecode or assembly. For a small overview of Babel you might consider looking at https://github.com/thejameskyle/the-super-tiny-compiler

Dara Hak's photo

@Henry I don't remember where you wrote it, but you said you were willing to discuss with managers (?) to try to convince some companies to start contributing to Babel. Have you already done that? If yes, how did it go?

Henry's photo

Maintaining @babel

Yeah I'l talk to people if they want, I don't remember everyone who reached out already

Paul Lee's photo

Babel was formerly called 6to5. How the name got changed?

Henry's photo

Maintaining @babel

Haha, this is a common question! I believe this is either before or right when some of the current team got involved with the project. TL;DR is probably just that Babel was compiling more than 6to5: 7to5, 8to5, ES2015toES5, etc. Babel is well known name regarding languages/translation via the Towel of Babel and Babelfish.

It's also our most commented on issue yet: (217 comments). In the end, Sebastian chose to go with Babel. James wrote a blog post on the rename: http://babeljs.io/blog/2015/02/15/not-born-to-die.

Srigi's photo

Will Babel support workflow like autoprefixer - one will be able to define target support group "last 4 version" or "> 5%" and resulting transformations will reflect that?

Henry's photo

Maintaining @babel

We already have for a long time, with https://github.com/babel/babel-preset-env!

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

And we have support for reading a browserslist file instead of using the config option in the 2.0 version of the preset (in alpha with Babel 7).

Brian Ng's photo

To slightly expand on Henry's answer... the upcoming release of babel-preset-env 2.x has reading targets from the browserslist key in your package.json or .browserslistrc file enabled by default! This allows you to maintain a single config for both autoprefixer and Babel!

Babel Bot's photo

Are you a robot?

Brian Ng's photo

I'm not... but I've heard rumors that @hzoo is 🤖

Mark Larah's photo

how crazy/feasible would it be to allow for different backends using babel? (e.g. wasm, llvm...) (assuming a runtime is included)

Justin Ridgewell's photo

It sounds like you want to run JS though babel, but have it output into wasm or c code? You'd have to write a new Printer, and translate unimaginable semantics. This is probably something of a 12 out of 10 on a difficulty scale.

Alfred Crosby's photo

How's your daily life while working on company and doing OSS project?

Show +2 replies
Justin Ridgewell's photo

For me, my passion for side projects rises and falls. Some weeks I'll spend several hours at night reviewing and coding. And others I'll have no desire to look at my computer, let alone review someone else's code.

It definitely helps to be given time at work to contribute to open source work.

Brian Ng's photo

As both a new dad and startup co-founder, I often feel lucky to have even a few spare moments to help on the project where I can. I'll also echo Daniel's sentiments: one of the nicest parts of working on Babel is working alongside the community and everyone on the team.

Kent C. Dodds's photo

What do you all think about babel-macros?

Logan Smyth's photo

@babeljs maintainer, general JS dev, currently loving Rust

I haven't personally had the time to look into it much 😅

Justin Ridgewell's photo

It's an interesting idea on meta programing! It kinda feels like the magic of using underscore templates, than realizing you can precompile them before serving.

Tommy Hodgins's photo

Is it possible to use Babel to convert a jQuery-dependent codebase -> vanilla JavaScript?

Justin Ridgewell's photo

Definitely, though it'll be very hard to quickly translate 100% of jQuery code to just JS. This is because babel really shines as a syntax transformer (where crystal clear what's intended to happen in source code) vs jQuery which is a runtime library (which it's impossible to handle every case, because you can do crazy things in JS at times).

But if you're looking for something as simple as transforming $.each(array, () => {}) to array.forEach(() => {}, there shouldn't be any issues at all. Try checking out babel-codemod

Henry's photo

Maintaining @babel

Yeah you could use it as a codemod like Justin said to cover the 90% usecase and then manually convert the rest of it that isn't worth trying to code (which is advice for codemods in general).

Susan Dinglesen's photo

"A JavaScript compiler that lets you use next gen JavaScript, today" is too overwhelming for a beginner developer.

How would you explain Babel to them?

Logan Smyth's photo

@babeljs maintainer, general JS dev, currently loving Rust

I'd probably descibe it as

A tool for transforming sourcecode from one form to another, with the most popular usecase being converting newer JavaScript syntax into older syntax to support older browsers and environments.

Susan Dinglesen's photo

Is babel-core/register production ready?

Quoting James Kyle:

> No and it's never going to be, it's a bad idea for production because it requires recompilation at runtime, which is the whole point of the register hook. source

Is it still valid?

Daniel Tschinder's photo

@babeljs maintainer and frontend tooling nerd.

babel-register can be used in production and I also did that at a company I worked for, but I wouldn't recommend to do it if it can be avoided.

What we mean by not production ready are more the technical limitations that babel-register has and that cannot be avoided which is why we do not recommend to use it for critical infrastructure.

James is correct that babel-register is build to transpile the code at runtime and in order to do that it needs to load babel, needs to load the sourcemap mapping module and also needs to keep the transpiled modules in the cache. This makes your NodeJS script have a longer startup time, and also consume more memory. Especially if you have a lot of files that babel-register needs to transpile this can lead to massive increase in runtime and memory.

An alternative recommended way is to use babel-cli and compile all the files for NodeJS during your build process or deployment beforehand and then use these files to run you NodeJS application. This way you don't need to load babel during runtime or hold anything in cache and you get the full performance that NodeJS can offer.

So the decision if you want to use it or not is always up to you. babel-register works stable but because of it's nature it will always be slower and more memory intensive than using regular pre-transpiled files.

Justin Ridgewell's photo

Yes, that's our official position. But that may be a fine tradeoff for you. The issue is startup performance (or runtime performance if you lazy load things). Why would you want the first customer to wait an extra 1s while we compile the JS code, when you can run babel over the entire project first then start the server.

Ashwin D Kini's photo

What kind of proficiencies must an aspiring Babel core contributor aim to have?

Justin Ridgewell's photo

Depends on what things you want to tackle. We have quite a few features being written by summer interns the Google Summer of Code and Rails Girls Summer of Code projects, so you definitely don't need to be a superstar 20-year JS veteran to contribute.

For syntax transforms: A strong understanding of current ES5 code is helpful, then just the imagination to "desugar" ESnext code into whatever the ES5 equivalent is.

Or you can work with code health. @hzoo got started with updating out code linter. Documentation is sorely needed, test cases, or even build steps. So, just the ability to read someone else's source code and understand the intention.

Sergey Rubanov's photo

How to prevent people from using non-standard / unstable plugins in production?

Logan Smyth's photo

@babeljs maintainer, general JS dev, currently loving Rust

Babel's architecture means that developers have to opt into experimental features, which hopefully provides an easy way to keep to see what experimental features are in use. We're also discussing doing some renaming of plugins in Babel's 7.x release to make it clearer when something is a proposal, e.g. "babel-plugin-transform-decorators" might be "babel-plugin-proposal-decorators" instead, so "babel-plugin-transform-*" would mean it's an ECMA-standard feature.

If you're aiming to use 100% standard features, ESLint would also make that easy, since you need to opt into using Babel's parser for it to support non-standard syntax.

Alex Wilmer's photo

Which upcoming spec features are you most excited about? pipe operator? observables (etc)?

Show +1 replies
Henry's photo

Maintaining @babel

(Maybe it's weird) I'm not particularly excited about any of them 🙂 , same with the ones we've already landed

Jonathan Neal's photo

Is the project formally sponsored? Are any of you formally sponsored? Would the project be at risk if it wasn’t sponsored?

Justin Ridgewell's photo

I think I'm the closest to being officially sponsored. I'm a Google engineer that spends my 20% time working on babel, and my direct team donates $100 on top of that.

@hzoo is a Behance engineer, and I think he spends roughly 50% of his time on babel?

Other than that, we're all unpaid volunteers. There's some backers on opencollective.com/babel, but not nearly enough to sponsor a full time engineer.

Logan Smyth's photo

@babeljs maintainer, general JS dev, currently loving Rust

A couple of Babel's contributors are able to work on Babel part-time at their day job, which helps keep things moving. Otherwise our team is primarily volunteers. Babel currently accepts donations on https://opencollective.com/babel, but there's an open question around how best to reinvest those donations into Babel's community to keep things going.

Duane Rivera's photo

Which editors do you guys use to code?

Show +3 replies
Henry's photo

Maintaining @babel

I've always been using Sublime

Logan Smyth's photo

@babeljs maintainer, general JS dev, currently loving Rust

I use Sublime 3.x for general stuff, with vim for in-terminal editing like git rebase -i and such.

Babel Bot's photo

What do you think are qualities of a good maintainer (instead of a contributor/starter)?

Tommy Lawson's photo

When is Babel v7 releasing? What's the estimated date?

Henry's photo

Maintaining @babel

I was planning on doing our first beta release today - https://github.com/babel/website/pull/1166? Might have to delay since other work, doing this AMA, Kent's blog post today as well http://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros

Linda Qinsen's photo

Hi Awesome Babel team! What was the initial motivation behind creating Babel.js?

Henry's photo

Maintaining @babel

I would just read Sebastian's post (the creator) on this 🙂 : https://medium.com/@sebmck/2015-in-review-51ac7035e272.

Summary: Sebastian knew JS but wanted to actually understand how it all worked: what's the grammar, how do features interact, what's parsing, etc. He found Traceur and wanted to learn how compilers/ES6 worked so he just went ahead and combined a few js libraries to make it all work.

Daniele Salvatore's photo

What are the tools you use to test the product?

Show +1 replies
Logan Smyth's photo

@babeljs maintainer, general JS dev, currently loving Rust

We currently use Mocha unit tests with a large dataset of expected inputs and outputs for transformations.

Henry's photo

Maintaining @babel

For more info on what Justin said: https://github.com/babel/babel/blob/master/CONTRIBUTING.md#writing-tests

These are all fixture tests that some people know now as "snapshot" tests (we have our own naming, etc)

We're working with folks on TC39 like Leo, Rick, and Mike at Bocoup to get test262 tests in Babel - https://github.com/babel/babel/issues/4987. And ideally we would run Babel on itself before publishing https://github.com/babel/babel/issues/6134 as well as have smoke test for top npm packages. (these are all important contributions someone could make)

Daniele Salvatore's photo

How is your development lifecycle structured?

Henry's photo

Maintaining @babel

Can check out https://github.com/babel/notes. This is kinda generic so not sure how to answer. Like a lot of projects, it's not that organized. People tend to work on what they like and we push those people to lead that effort and find more people to get involved. We try to have meetings to focus on certain efforts but ultimately we can't/don't really have deadlines.

manimaran's photo

what is main scope of the babel project? how to organize your team? please tell your developing story of the project?

Nishant Sahoo's photo

For a beginner like me who just knows that Babel can transpile ES6/7 to ES5, how can I get deep into the transpiling part of Babel.

Brian Ng's photo

An invaluable resource in learning about how Babel plugins/transforms work is James Kyle's awesome babel-handbook.

Also, be sure to examine the plugins that are part of Babel and play around with astexplorer... they're both fantastic ways to learn as well.

As always, feel free to join our Slack if you need help or have any questions!

Ivan Čurić's photo

Hey! Any plans for compiling Typescript?

Henry's photo

Maintaining @babel

Yep 😎 ! we already landed this for 7.0 with the help of the Typescript team. (It took a lot of work on their part, and a lot to review for us), so look out for a blog post/guide soon on how to make this work.

Basically, babel-preset-typescript will work the same as babel-preset-flow to remove the types from your code.

Parth Prajapati's photo

Which module of Babel would you recommend first, if I needed to start contributing to Babel?

Brian Ng's photo

Hard to answer in terms of a specific "module", but a couple ideas:

  • Check out any issues (especially those tagged with beginner-friendly)

  • Anything related to documentation or the website

  • Do you use Babel? Have you set it up yourself? We'd love to improve the developer experience overall, which includes both contributing to the code base as well as usage.

Aleksa Pajkić's photo

Would you recommend newbies to learn and get comfortable with new stuff right away (promises, awaits, etc...) or go through established ways first?

Henry's photo

Maintaining @babel

The older ways work fine, and there are a lot of tutorials about them! I think there is a lot of advice on this but people like to say you may need to feel the pain in order to know why you would use the new thing. I don't think it matters that much: if you think it's too complicated to do something new, stick with what works. Chasing the new thing is tiring, unless using it is actually helpful enough?

Not everyone "has" to use the latest syntax or Babel

Justin Ridgewell's photo

There's nothing wrong with using new standardized (as in, accepted and official JS syntax and runtime code). The ones you list are prefect examples of official code. Promises are everywhere, and essential to understanding async in JS. Awaits are well on there way to becoming best practice (and mandatory) learning, too.

But be careful with "experimental" codes that are not fully standardized (still in the proposal process, per the TC39).

Karan Sharma's photo

What does the loose option in babel-preset-env does?

Henry's photo

Maintaining @babel

https://github.com/babel/babel-preset-env#loose - not as spec compliant, smaller output, may be faster. Try it in the REPL

William Hilton's photo

6to5 was an upstart competing with Google Closure Compiler and... Traceur, I think? Now it's the status quo. Do you foresee a smaller JS compiler coming along and having the same kind of success as Babel?

Henry's photo

Maintaining @babel

There is https://gitlab.com/Rich-Harris/buble which is "smaller" but I don't think it's use case is the same. There is almost no configuration (not a bad thing at all) so no custom plugins, and it only compiles performant ES5. It's scope has expanded a bit (used to only be ES6, but now JSX, and people will continue to ask for more), and tries to compile to readable ES5 rather than be spec compliant.

However like any open source project you need a lot of maintainers to continually update it over the months/years. If someone wants to make something new instead, that sounds fine but depends on the goals and why you wouldn't contribute back to Babel already or refactor internally. No, I don't really see it happening, it's already hard enough to maintain Babel as is 😛

Suarez's photo

Babel adds bootstrap code to every single file which becomes repetitive across files. Is there any way to overcome this?

Henry's photo

Maintaining @babel

not sure what "bootstrap" code is, but I assume you mean helper methods. If it's the same then gzip covers it and otherwise you can use babel-plugin-transform-runtime

Justin Ridgewell's photo

Definitely recommend checking out babel-plugin-transform-runtime. Specifically, only enable helpers and disable polyfill and regenerator.

Suarez's photo

Babel has support for few stage-0 proposals but not everything. How do you choose which feature to add to babel?

Show +2 replies
Logan Smyth's photo

@babeljs maintainer, general JS dev, currently loving Rust

There are a few primary factors that come to mind:

  • Proposals that are not syntax-related are usually left up to core-js to polyfill, and some new features just can't be polyfilled
  • We're a volunteer team, so someone needs to come forward with the interest to implement a given proposal, and ideally keep it updated.
  • Some stage 0 proposals are expected to iterate quickly, which it less likely that someone will want to maintain it.
Daniel Tschinder's photo

@babeljs maintainer and frontend tooling nerd.

We try to support as much as possible for all proposals where we get the signal from their champions that a basic consensus for this exists in TC39.

In the past we were very slow in getting new proposals implemented because we did not have enough people on the team. Luckily this changed in the last months and the next major version of babel will include a lot of the new proposals.

Jose M. Oberle's photo

The spec option in babel-preset-env makes the transformation more spec complaint. But, not activating it will create any problems in how it works?

Henry's photo

Maintaining @babel

This is similar to https://hashnode.com/ama/with-babel-team-cj7awmk5e00ij54wu6onnyc5w#cj7bj20w600z254wup0dbuq9k. It might but we try to make the default as spec compliant as possible so the things in spec might be too slow to add in.

Karan Sharma's photo

How can I get babel compiler logs when there is an error in compilation?

Justin Ridgewell's photo

You should already be getting a stack trace and the exact source code that causes the issue. If you're asking about badly transformed code (as in, the output is incorrect), then you'd have to do some digging like disabling plugins 1 by 1 until you track down the offender.

Logan Smyth's photo

@babeljs maintainer, general JS dev, currently loving Rust

We don't have a specific log. Generally if an error is encountered, Babel will throw an exception, and it would be up to whatever is calling Babel to handle that. Usually that means it will be displayed in the console.

Jacob's photo

Is there any way to omit a commonly added plugin or preset under environment configuration in babelrc file? Right now because of non common required in a particular environment, I have to copy all the common config to each environment.

Logan Smyth's photo

@babeljs maintainer, general JS dev, currently loving Rust

In Babel 7.x we're adding support for a .babelrc.js file, so you can potentially programmatically build up the config you'd like based on environmental variables, to try to address cases like this more easily. Feel free to join our Slack if you want to chat more.

Babel Bot's photo

Why do you continue working on Babel? What makes maintaining a project worth the time/effort?

Babel Bot's photo

What's it like to do a release? (what's involved, hows the stress level, handling regressions, changelog, community feedback, semver, etc)

Duane Rivera's photo

What was the last shell script you installed in your machine? 😀

I know this is off topic, but I am just curious.

Justin Ridgewell's photo

i think the last one I coded up was to let me checkout Github PRs locally: https://gist.github.com/jridgewell/a93ca90c53183a6a3ba9392635c77620

Henry's photo

Maintaining @babel

I don't install a lot, https://github.com/junegunn/fzf?

Babel Bot's photo

What's been your favorite experience/story from working on Babel?

Anup's photo

How does your team maintain such huge code base and most importantly how do you find time for this apart from the day job?

Henry's photo

Maintaining @babel

It's impossible to know everything that's going on in a codebase - not that different from work, even more so for an open source project where you aren't reviewing every single PR or know about each aspect or part of the code.

We try to have team leads for different packages/areas which are mostly determined based on interest/history https://github.com/babel/notes/blob/master/2017-04/april-08.md#proposed-team-structuregovernance.

We have to invest in getting more people involved so that we can get more reviewers ultimately.

You can find the time if it's (hopefully) fun enough to do, otherwise live your life with other hobbies, family, friends,et c.