ember-cli-babel

What is ember-cli-babel?

ember-cli-babel is an Ember CLI addon that provides Babel transpilation for Ember.js applications. It allows developers to use the latest JavaScript features by transpiling ES6+ code to ES5, ensuring compatibility with older browsers.

What are ember-cli-babel's main functionalities?

Transpile ES6+ to ES5

This feature allows you to transpile modern JavaScript (ES6+) to ES5, making your code compatible with older browsers. The code sample shows how to configure ember-cli-babel in an Ember CLI project to include the Babel polyfill.

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-babel': {
      includePolyfill: true
    }
  });
  return app.toTree();
};

Custom Babel Plugins

You can add custom Babel plugins to your Ember CLI project. The code sample demonstrates how to include the '@babel/plugin-proposal-class-properties' plugin.

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    babel: {
      plugins: ['@babel/plugin-proposal-class-properties']
    }
  });
  return app.toTree();
};

Custom Babel Presets

This feature allows you to use custom Babel presets in your Ember CLI project. The code sample shows how to include the '@babel/preset-env' preset.

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    babel: {
      presets: ['@babel/preset-env']
    }
  });
  return app.toTree();
};

Other packages similar to ember-cli-babel

babel-loader

babel-loader is a webpack loader that allows you to transpile JavaScript files using Babel and webpack. It is similar to ember-cli-babel in that it enables the use of modern JavaScript features, but it is used in the context of a webpack build process rather than an Ember CLI project.

gulp-babel

gulp-babel is a Gulp plugin that allows you to use Babel to transpile your JavaScript files. Like ember-cli-babel, it helps you write modern JavaScript while ensuring compatibility with older browsers. However, it is used within a Gulp build system instead of Ember CLI.

rollup-plugin-babel

rollup-plugin-babel is a Rollup plugin that integrates Babel into the Rollup bundler. It provides similar functionality to ember-cli-babel by allowing you to transpile modern JavaScript code, but it is used within a Rollup build process.

README

ember-cli-babel

This Ember-CLI plugin uses Babel to allow you to use ES6 syntax with your Ember-CLI project.

Installation

npm install --save-dev ember-cli-babel

Usage

This plugin should work without any configuration after installing. By default it will take every .js file in your project and run it through the Babel transpiler to convert the ES6 code to ES5. Running existing ES5 code through the transpiler shouldn't change the code at all (likely just a format change if it does).

If you need to customize the way that Babel transforms your code, you can do it by passing in any of the options found here. Example:

// ember-cli-build.js

var app = new EmberApp({
  babel: {
    // disable comments
    comments: false,
    // don't transpile arrow and generator functions
    blacklist: [
      'es6.arrowFunctions',
      'regenerator'
    ]
  }
});

Polyfill

Babel comes with a polyfill that includes a custom regenerator runtime and core.js. Many transformations will work without it, but for full support you must include the polyfill in your app. The Babel feature tour includes a note for features that require the polyfill to work.

To include it in your app, pass includePolyfill: true in your ember-cli-babel options.

Features

Out of the box without a polyfill the following ES6 features are enabled:

Feature	Supported
Arrows and Lexical This	YES
Classes	YES
Enhanced Object Literals	YES
Template Strings	YES
Destructuring	YES
Default + Rest + Spread	YES
Let + Const	YES
Iterators + For..Of	NO
Generators	NO
Comprehensions	YES
Unicode	YES
Modules	YES
Module Loaders	NO
Map + Set + WeakMap + WeakSet	NO
Proxies	NO
Symbols	NO
Subclassable Built-ins	PARTIAL
Math + Number + String + Object APIs	NO
Binary and Octal Literals	PARTIAL
Promises	NO
Reflect API	NO
Tail Calls	PARTIAL

See the Babel docs for more details

About Modules

Ember-CLI uses its own ES6 module transpiler for the custom Ember resolver that it uses. Because of that, this plugin disables Babel module compilation by blacklisting that transform. If you find that you want to use the Babel module transform instead of the Ember-CLI one, you'll have to explicitly set compileModules to true in your configuration. If compileModules is anything other than true, this plugin will leave the module syntax compilation up to Ember-CLI.