You don't tell Babel to target ES5, you choose the necessary presets/plugins that do that for you. For example, if you use the es2015 preset, this will compile ES6 code to ES5-compatible code. You don't specify a "target".

The guide below will take you through using Babel to transform ES6 code into code that can run in an environment that supports <= ES5.


0. A note on API changes from Babel 5

In the documentation for 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.

And:

Babel 6 ships without any default transforms, so when you run Babel on a file it will just print it back out to you without changing anything.

______

1. Install babel-cli

First, as in the docs, you need to install babel-cli:

$ npm install babel-cli

______

2. Define presets in .babelrc

Second, you need to use a .babelrc (docs) local to your files and explicitly define the presets that you want Babel to use. For example, for ES6+ features use the env preset.

...a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s).

Install it:

npm install @babel/preset-env

And then declare it in your .babelrc:

{
  "presets": ["@babel/preset-env"]
}

Note: if you are using Babel 7.x you may prefer to use a "project-wide configuration" (babel.config.js) (docs) which "applies broadly, even allowing plugins and presets to easily apply to files in node_modules or in symlinked packages".

______

3. Run babel

Now running the babel command as in your example should work:

$> babel ./src/myclass.js --out-file ./out/app.js

Alternatively, use a bundler like webpack, rollup, or browserify, with their respective babel plugin.

Answer from sdgluck on Stack Overflow
🌐
Ambreenkhan
ambreenkhan.dev › javascript › z-convert-es6-to-es5
How to Convert ES6 into ES5 using Babel
Inside .babelrc you need to define the preset for your source JavaScript file. To specify that you are transpiling code from an ES6+ source, add the following code into .babelrc: ... The babel command takes two arguments: the path to your ES6 code and a path where you want your ES5 code to be ...
🌐
TutorialsPoint
tutorialspoint.com › babeljs › babeljs_transpile_es6_modules_to_es5.htm
BabelJS - Transpile ES6 Modules to ES5
npm install --save-dev gulp npm install --save-dev babelify npm install --save-dev browserify npm install --save-dev babel-preset-env npm install --save-dev babel-core npm install --save-dev gulp-connect npm install --save-dev vinyl-buffer npm install --save-dev vinyl-source-stream
🌐
TutorialsPoint
tutorialspoint.com › babeljs › babeljs_transpile_es7_features_to_es5.htm
BabelJS - Transpile ES7 features to ES5
To transpile the exponentiation operator, we need to install a plugin to be installed as follows − · npm install --save-dev babel-plugin-transform-exponentiation-operator · Add the plugin details to .babelrc file as follows − · { "presets":[ "es2015" ], "plugins": ["transform-expone...
🌐
Hexmos
hexmos.com › freedevtools › tldr › common › babel
Transpile JavaScript - Babel ES6 to ES5 | Online Free DevTools by Hexmos
A transpiler which converts code from JavaScript ES6/ES7 syntax to ES5 syntax. More information: https://babeljs.io/docs/babel-cli.
🌐
GitHub
github.com › tonysneed › JsTranspile.Babel-Cli
GitHub - tonysneed/JsTranspile.Babel-Cli: Transpile ES6 to ES5 with Babel using the Command-Line
Transpile ES6 to ES5 with Babel using the Command-Line - tonysneed/JsTranspile.Babel-Cli
Author   tonysneed
🌐
TutorialsPoint
tutorialspoint.com › babeljs › babeljs_transpile_es6_features_to_es5.htm
BabelJS - Transpile ES6 features to ES5
In this chapter, we will see the features added to ES6. We will also learn how to compile the features to ES5 using BabelJS.
🌐
Medium
medium.com › @SunnyB › how-to-convert-es6-into-es5-using-babel-1b533d31a169
How to Convert ES6 into ES5 using Babel | by Sunny Beatteay | Medium
July 31, 2019 - Babel is a transpiler (translates code in one language to another computer language at the same abstraction level) that can turn our ES6 code into ES5. I’m going to assume you know how to use both node and npm and have them both installed ...
Find elsewhere
Top answer
1 of 3
87

You don't tell Babel to target ES5, you choose the necessary presets/plugins that do that for you. For example, if you use the es2015 preset, this will compile ES6 code to ES5-compatible code. You don't specify a "target".

The guide below will take you through using Babel to transform ES6 code into code that can run in an environment that supports <= ES5.


0. A note on API changes from Babel 5

In the documentation for 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.

And:

Babel 6 ships without any default transforms, so when you run Babel on a file it will just print it back out to you without changing anything.

______

1. Install babel-cli

First, as in the docs, you need to install babel-cli:

$ npm install babel-cli

______

2. Define presets in .babelrc

Second, you need to use a .babelrc (docs) local to your files and explicitly define the presets that you want Babel to use. For example, for ES6+ features use the env preset.

...a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s).

Install it:

npm install @babel/preset-env

And then declare it in your .babelrc:

{
  "presets": ["@babel/preset-env"]
}

Note: if you are using Babel 7.x you may prefer to use a "project-wide configuration" (babel.config.js) (docs) which "applies broadly, even allowing plugins and presets to easily apply to files in node_modules or in symlinked packages".

______

3. Run babel

Now running the babel command as in your example should work:

$> babel ./src/myclass.js --out-file ./out/app.js

Alternatively, use a bundler like webpack, rollup, or browserify, with their respective babel plugin.

2 of 3
10

The exact answer using babel with nodejs (and using CLI):

Install babel and preset

npm install babel-cli babel-preset-es2015

Execute with npx

npx babel  ./src/myclass.js --out-file ./out/app.js --presets babel-preset-es2015

Note

When babel-cli is globally installed could be not working. So this is my definitive solution

🌐
DotNetCurry
dotnetcurry.com › javascript › 1293 › transpile-es6-modules-es5-using-babel
Transpiling ES6 modules to ES5 using Babel | DotNetCurry
We can use Babel directly or with a task manager like Gulp to transpile ES6 modules into ES5. This uses Babel to transpile ES6 code to ES5
🌐
GitHub
github.com › inspirnathan › babel-tutorial-transpile-to-es5
GitHub - inspirnathan/babel-tutorial-transpile-to-es5: A small demo of transpiling code to ES5 compatible code for use in older browsers such as Internet Explorer 11.
A small demo of transpiling code to ES5 compatible code for use in older browsers such as Internet Explorer 11. - inspirnathan/babel-tutorial-transpile-to-es5
Author   inspirnathan
🌐
Medium
hydroid.medium.com › use-es6-babel-with-gulp-5c7951592c29
How to convert ES6 to ES5 using Babel with Gulp - Hydroid
September 9, 2020 - gulp.task('babelTest', async function () { return gulp.src(requiredFiles) .pipe(babel({presets: ['@babel/preset-env'] })) .pipe(gulp.dest('dist/js')); }); ... And run the build using the below command, it should now perform transpilation also along with other tasks that you want to run during the build. ... The ES6 -> ES5 conversion should have before the uglification of code because uglification cannot understand the ES6 syntax.
🌐
DEV Community
dev.to › sunnyb › how-to-convert-es6-into-es5-using-babel-3k31
How to Convert ES6+ into ES5 using Babel - DEV Community
March 11, 2020 - Babel is a transpiler (translates code in one language to another computer language at the same abstraction level) that can turn our ES6 code into ES5. I’m going to assume you know how to use both node and npm and have them both installed ...
🌐
Freemediatools
freemediatools.com › babeljscompilertool
Free Babel Compiler Online - Free JavaScript ES6+ to ES5 Transpiler | JSX & React Support
Our free online Babel compiler allows you to instantly transpile ES6, ES7, ES8, ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ES2023, and ES2024 JavaScript code to ES5 without any installation or setup.
🌐
GitHub
github.com › Drozerah › es6-babel-node-starter
GitHub - Drozerah/es6-babel-node-starter: ES6 to ES5 transpilation with Babel.js and Node.js · GitHub
Transpiling ECMAScript2015 aka ES6 to ES5 with Babel from a JS entry point file, then automatically export it into a distribution folder ready for production with NPM scripts
Forked by 2 users
Languages   HTML 62.9% | CSS 36.1% | JavaScript 1.0%
🌐
Gitlab
jstool.gitlab.io › babel-es6-to-es5
ES6 conversion ES5 (Babel.js online test) js escape js new syntax compatible with old browsers
ES6 converts ES5, also supports ES7/ES8/ES9, etc. ... Online use, simple and lightweight, no need to install Node.js, configure a complex development environment
🌐
YouTube
youtube.com › watch
Use Babel 7 to Compile ES2018 to ES2015 - Transpile ES6 into ES5 - YouTube
Use Babel 7 to Compile ES2018 to ES2015 - Transpile ES6 into ES5In this tutorial, we are going to transpile es6 code into es5 using babel. We are going to le...
Published   February 12, 2019
🌐
jogendra@.net
jogendras.wordpress.com › 2017 › 10 › 01 › transpile-es6-code-to-es5-using-babel
Transpile ES6 code to ES5 using Babel | jogendra@.net
August 9, 2020 - Is this same as ES6 code ? Yes, babel did not transpile our code to ES5. Why? because Babel doesn’t do anything. It basically acts like const babel = code => code; by parsing the code and then generating the same code back out again.
🌐
Educative
educative.io › answers › what-is-babel-transpiler
What is Babel Transpiler?
Babel enables developers to use cutting-edge Javascript without worrying about browser support. Babel is a JavaScript transpiler, meaning it converts a newer version of ECMAScript, such as ES9, to a standard version (ES5).
Top answer
1 of 1
4

Include this polyfill snippet above your code, so you can transpile it on the fly online. But for production you should use babel-polyfill

// Production steps of ECMA-262, Edition 6, 22.1.2.1
// Reference: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from
if (!Array.from) {
  Array.from = (function () {
    var toStr = Object.prototype.toString;
    var isCallable = function (fn) {
      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
    };
    var toInteger = function (value) {
      var number = Number(value);
      if (isNaN(number)) { return 0; }
      if (number === 0 || !isFinite(number)) { return number; }
      return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
    };
    var maxSafeInteger = Math.pow(2, 53) - 1;
    var toLength = function (value) {
      var len = toInteger(value);
      return Math.min(Math.max(len, 0), maxSafeInteger);
    };

    // The length property of the from method is 1.
    return function from(arrayLike/*, mapFn, thisArg */) {
      // 1. Let C be the this value.
      var C = this;

      // 2. Let items be ToObject(arrayLike).
      var items = Object(arrayLike);

      // 3. ReturnIfAbrupt(items).
      if (arrayLike == null) {
        throw new TypeError("Array.from requires an array-like object - not null or undefined");
      }

      // 4. If mapfn is undefined, then let mapping be false.
      var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
      var T;
      if (typeof mapFn !== 'undefined') {
        // 5. else      
        // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
        if (!isCallable(mapFn)) {
          throw new TypeError('Array.from: when provided, the second argument must be a function');
        }

        // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
        if (arguments.length > 2) {
          T = arguments[2];
        }
      }

      // 10. Let lenValue be Get(items, "length").
      // 11. Let len be ToLength(lenValue).
      var len = toLength(items.length);

      // 13. If IsConstructor(C) is true, then
      // 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len.
      // 14. a. Else, Let A be ArrayCreate(len).
      var A = isCallable(C) ? Object(new C(len)) : new Array(len);

      // 16. Let k be 0.
      var k = 0;
      // 17. Repeat, while k < len… (also steps a - h)
      var kValue;
      while (k < len) {
        kValue = items[k];
        if (mapFn) {
          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
        } else {
          A[k] = kValue;
        }
        k += 1;
      }
      // 18. Let putStatus be Put(A, "length", len, true).
      A.length = len;
      // 20. Return A.
      return A;
    };
  }());
}