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"
}
Yves M.
  • 29,855
  • 23
  • 108
  • 144
Kevin Wu
  • 8,461
  • 5
  • 28
  • 28
  • 2
    It's all in the docs if you look around: https://babeljs.io/docs/usage/api/, https://babeljs.io/docs/usage/runtime/, https://babeljs.io/docs/usage/cli/ – Felix Kling Sep 13 '15 at 03:47
  • 2
    the runtime docs link leads to 404. – Kev Dec 10 '15 at 09:54
  • 3
    For such a widely used library the docs are pretty bad. The good stuff is however inline in the code, but if you don't know what you actually need to use it's useless. – theflowersoftime May 24 '16 at 19:37

3 Answers3

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.

JMM
  • 26,019
  • 3
  • 50
  • 55
  • And one more question: what should I use in my project with webpack? – just-boris Sep 14 '15 at 09:04
  • @just-boris see http://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 Sep 14 '15 at 12:05
  • For people who are interested in difference between `babel-runtime` and `babel-polyfill`. https://stackoverflow.com/questions/31781756/is-there-any-practical-difference-between-using-babel-runtime-and-the-babel-poly – user1429007 Jun 12 '17 at 19:18
  • @JMM, Recently, I just get confused with the dependencies, @babel/core and babel-core. What is the difference? – Ben Cheng Nov 07 '18 at 03: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.

Community
  • 1
  • 1
Kevin
  • 1,195
  • 12
  • 14
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.

Qiulang
  • 10,295
  • 11
  • 80
  • 129