64

My node webpack project uses three babel libraries. What's the difference between these and how are they being used?

"dependencies": {
  "babel-runtime": "^5.8.24"
}

"dev-dependencies": {
  "babel": "^5.8.23",
  "babel-core": "^5.8.23"
}
3

3 Answers 3

46

babel-core is the API. For v5 the babel package is the CLI and depends on babel-core. For v6, the babel-cli package is the CLI (the CLI bin command is still babel though) and the babel package doesn't do anything. babel-runtime I guess is just the runtime (polyfill and helpers) to support code that's already been transformed.

4
  • And one more question: what should I use in my project with webpack?
    – just-boris
    Commented Sep 14, 2015 at 9:04
  • @just-boris see babeljs.io/docs/setup/#webpack and the note in the plugin's readme about peer dependencies. See also the link @ FelixKling posted for the optional runtime transformer.
    – JMM
    Commented Sep 14, 2015 at 12:05
  • For people who are interested in difference between babel-runtime and babel-polyfill. stackoverflow.com/questions/31781756/… Commented Jun 12, 2017 at 19:18
  • @JMM, Recently, I just get confused with the dependencies, @babel/core and babel-core. What is the difference?
    – Ben Cheng
    Commented Nov 7, 2018 at 3:21
21

TL;DR The things to compare here are:

  1. babel (use for 5.x.x) vs babel-cli+babel-core (pick one for 6.x.x)
  2. babel-polyfill (use for non-libraries) vs babel-runtime+babel-plugin-transform-runtime (use for libraries)

From https://babeljs.io/blog/2015/10/31/setting-up-babel-6:

The babel package is no more. Previously, it was the entire compiler and all the transforms plus a bunch of CLI tools, but this lead to unnecessarily large downloads and was a bit confusing. Now we’ve split it up into two separate packages: babel-cli and babel-core.

npm install --global babel-cli

or

npm install --save-dev babel-core

If you want to use Babel from the CLI you can install babel-cli or if you want to use the Node API you can install babel-core.

babel-runtime just allows polyfills that don't pollute the global space, unlike babel-polyfill which pollutes your global space. From http://babeljs.io/docs/plugins/transform-runtime/:

[babel-runtime] automatically polyfills your code without polluting globals. (This plugin is recommended in a library/tool)

If you use babel-runtime, you should also

npm install --save-dev babel-plugin-transform-runtime

In most cases, you should install babel-plugin-transform-runtime as a development dependency (with --save-dev) and babel-runtime as a production dependency (with --save).

The transformation plugin is typically used only in development, but the runtime itself will be depended on by your deployed/published code.

Also, babel-runtime+babel-plugin-transform-runtime and babel-polyfill are generally mutually exclusive--meaning you should only use one or the other. From a comment here http://jamesknelson.com/the-six-things-you-need-to-know-about-babel-6/:

You should be using either babel-polyfill or babel-runtime. They are mutually exclusive—unless of course you know what you are doing. But they are essentially the same thing. These are just helpers. babel-polyfill achieves the same goal by mutating globals whereas babel-runtime does so modularly. Unless you are developing a library, I’d recommend you use the polyfill.

1

The Six Things You Need To Know About Babel 6 explained it quite well, to quote

The babel npm package no longer exists. Instead, Babel has been split into multiple packages:

babel-cli, which contains the babel command line interface babel-core, which contains the Node API and require hook babel-polyfill, which when required, sets you up with a full ES2015-ish environment To avoid accidental conflicts, make sure to remove any previous Babel packages like babel, babel-core, etc. from your package.json, and then npm uninstall them.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.