Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
ember-cli-babel
Advanced tools
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.
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();
};
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 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 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.
This Ember-CLI plugin uses Babel and babel-preset-env to allow you to use ES6 syntax with your Ember CLI project.
ember install ember-cli-babel
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 your ES6 code to code supported by your
target browsers (as specified in config/targets.js
in ember-cli >= 2.13). Running non-ES6 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-preset-env
configures the plugins that transform your code,
you can do it by passing in any of the options found here.
Example (configuring babel directly):
// ember-cli-build.js
var app = new EmberApp({
babel: {
// enable "loose" mode
loose: true,
// don't transpile generator functions
exclude: [
'transform-regenerator',
]
}
});
Example (configuring ember-cli-babel itself):
// ember-cli-build.js
var app = new EmberApp({
'ember-cli-babel': {
compileModules: false
}
});
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.
// ember-cli-build.js
var app = new EmberApp(defaults, {
'ember-cli-babel': {
includePolyfill: true
}
});
For addons which want additional customizations, they are able to interact with this addon directly.
treeForAddon(tree) {
let addon = this.addons.find(addon => addon.name === 'ember-cli-babel'); // find your babel addon
let options = addon.buildBabelOptions({
'ember-cli-babel'
})
return addon.transpileTree(tree, {
'babel': {
// any babel specific options
},
'ember-cli-babel': {
// any ember-cli-babel options
}
});
}
Older versions of Ember CLI (< 2.12
) use its own ES6 module transpiler. Because of that, this plugin disables Babel
module compilation by blacklisting that transform when running under affected ember-cli versions. 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.
FAQs
Ember CLI addon for Babel
We found that ember-cli-babel demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.