Git Product home page Git Product logo

broccoli-babel-transpiler's Introduction

broccoli-babel-transpiler

Build Status Build status

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.

Examples

You'll find three example projects using this plugin in the repository broccoli-babel-examples. Each one of them builds on top of the previous example so you can progess from bare minimum to ambitious development.

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
});

Polyfill

In order to use some of the ES6 features you must include the Babel polyfill.

You don't always need this, review which features need the polyfill here: ES6 Features.

var esTranspiler = require('broccoli-babel-transpiler');
var scriptTree = esTranspiler(inputTree, { browserPolyfill: true });

Plugins

Use of custom plugins works similarly to babel itself. You would pass a plugins array in options:

var esTranspiler = require('broccoli-babel-transpiler');
var applyFeatureFlags = require('babel-plugin-feature-flags');

var featureFlagPlugin = applyFeatureFlags({
  import: { module: 'ember-metal/features' },
  features: {
    'ember-metal-blah': true
  }
});

var scriptTree = esTranspiler(inputTree, {
  plugins: [
    featureFlagPlugin
  ]
});

Caching

broccoli-babel-transpiler uses a persistent cache to enable rebuilds to be significantly faster (by avoiding transpilation for files that have not changed). However, since a plugin can do many things to affect the transpiled output it must also influence the cache key to ensure transpiled files are rebuilt if the plugin changes (or the plugins configuration).

In order to aid plugin developers in this process, broccoli-babel-transpiler will invoke two methods on a plugin so that it can augment the cache key:

  • cacheKey - This method is used to describe any runtime information that may want to invalidate the cached result of each file transpilation. This is generally only needed when the configuration provided to the plugin is used to modify the AST output by a plugin like babel-plugin-filter-imports (module exports to strip from a build), babel-plugin-feature-flags (configured features and current status to strip or embed in a final build), or babel-plugin-htmlbars-inline-precompile (uses ember-template-compiler.js to compile inlined templates).
  • baseDir - This method is expected to return the plugins base dir. The provided baseDir is used to ensure the cache is invalidated if any of the plugin's files change (including its deps). Each plugin should implement baseDir as: Plugin.prototype.baseDir = function() { return \_\_dirname; };.

broccoli-babel-transpiler's People

Contributors

stefanpenner avatar turbo87 avatar chadhietala avatar rwjblue avatar nightire avatar sebmck avatar givanse avatar topaxi avatar greenkeeperio-bot avatar jayphelps avatar hhff avatar twokul avatar arthurvr avatar binoculars avatar eventualbuddha avatar jschiq2 avatar joliss avatar jdalton avatar peterood avatar locks avatar smfoote avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.