broccoli-babel-transpiler

What is broccoli-babel-transpiler?

The 'broccoli-babel-transpiler' package is a Broccoli plugin that uses Babel to transpile JavaScript files. It allows you to use the latest JavaScript features by converting ES6/ES7+ code into a backward-compatible version of JavaScript that can run in older environments.

What are broccoli-babel-transpiler's main functionalities?

Basic Transpilation

This feature allows you to transpile ES6+ JavaScript code to ES5 using Babel. The code sample demonstrates how to set up a basic transpilation process with the '@babel/preset-env' preset.

const Babel = require('broccoli-babel-transpiler');
const inputNode = 'src';
const outputNode = new Babel(inputNode, {
  presets: ['@babel/preset-env']
});
module.exports = outputNode;

Custom Plugins

This feature allows you to use custom Babel plugins to transform your code. The code sample shows how to use the '@babel/plugin-transform-arrow-functions' plugin to transform arrow functions into regular functions.

const Babel = require('broccoli-babel-transpiler');
const inputNode = 'src';
const outputNode = new Babel(inputNode, {
  plugins: ['@babel/plugin-transform-arrow-functions']
});
module.exports = outputNode;

Source Maps

This feature enables the generation of source maps, which help in debugging by mapping the transpiled code back to the original source code. The code sample demonstrates how to enable inline source maps.

const Babel = require('broccoli-babel-transpiler');
const inputNode = 'src';
const outputNode = new Babel(inputNode, {
  sourceMaps: 'inline'
});
module.exports = outputNode;

Other packages similar to broccoli-babel-transpiler

babel-cli

The 'babel-cli' package provides a command-line interface for Babel. It allows you to transpile files from the command line, making it suitable for simple build scripts and quick transformations. Unlike 'broccoli-babel-transpiler', it is not a Broccoli plugin and does not integrate directly into the Broccoli build pipeline.

gulp-babel

The 'gulp-babel' package is a Gulp plugin for Babel. It allows you to integrate Babel transpilation into a Gulp build process. This package is similar to 'broccoli-babel-transpiler' in that it integrates Babel into a build tool, but it is designed specifically for Gulp rather than Broccoli.

webpack

Webpack is a module bundler that can also transpile JavaScript using Babel through the 'babel-loader' plugin. It offers a more comprehensive solution for managing and bundling assets, including JavaScript, CSS, and images. While 'broccoli-babel-transpiler' focuses solely on JavaScript transpilation within the Broccoli ecosystem, Webpack provides a more extensive set of features for asset management and optimization.

README

broccoli-babel-transpiler

A Broccoli plugin which transpiles ES6 to readable ES5 by using babel.

How to install?

$ npm install broccoli-babel-transpiler --save-dev

How to use?

In your Brocfile.js:

var esTranspiler = require('broccoli-babel-transpiler');
var scriptTree = esTranspiler(inputTree, options);

You can find options at babel's github repo.

About source map

Currently this plugin only supports inline source map. If you need separate source map feature, you're welcome to submit a pull request.

Advanced usage

filterExtensions is an option to limit (or expand) the set of file extensions that will be transformed.

The default filterExtension is js

var esTranspiler = require('broccoli-babel-transpiler');
var scriptTree = esTranspiler(inputTree, {
    filterExtensions:['js', 'es6'] // babelize both .js and .es6 files
});

exportMetadata is an option that can be used to write a JSON file to the output tree that gives you metadata about the tree's imports and exports.