babel/doc/setup.md

layout	title	description	permalink	redirect_from
docs	Setup	Guides on how to setup 6to5 in whatever environment you might be working in.	/docs/setup/	/plugins.html

Find your guide

It doesn't matter if you're using Node.js or Rails, Gulp or Grunt, there's likely a guide on this page to help guide you. Go ahead and ⌘ + F whatever you're looking for. If it doesn't happen to be on this page you might want to stop by our support chat.

Node.js

CLI

Install

$ npm install --global 6to5

Usage

$ 6to5 script.js

For full documentation on the 6to5 CLI see the usage docs.

Require Hook

Install

$ npm install 6to5

Usage

All subsequent files required by node with the extensions .es6 and .js will be transformed by 6to5. The polyfill specified in Polyfill is also required.

require('6to5/register');

For full documentation on the 6to5 require hook see the usage docs.

Rails

Sprockets

See sprockets-es6's repo for more info. If you find any bugs please report them.

Issues with the output should be reported on the 6to5 issue tracker.

Install

$ gem install sprockets-es6

Usage

# Gemfile
gem 'sprockets'
gem 'sprockets-es6'

require 'sprockets/es6'

Build Systems

Brocolli

See broccoli-6to5-transpiler's repo for more info. If you find any bugs please report them.

Issues with the output should be reported on the 6to5 issue tracker.

Install

$ npm install --save-dev broccoli-6to5-transpiler

Usage

var to5Transpiler = require('broccoli-6to5-transpiler');
var scriptTree = to5Transpiler(inputTree, options);

Source maps

Currently this plugin only support inline source maps. If you need separate source map feature, we welcome you to submit a pull request.

Browserify

See 6to5ify's repo for more info. If you find any bugs please report them.

Issues with the output should be reported on the 6to5 issue tracker.

Install

$ npm install --save-dev 6to5ify

Usage via CLI

$ browserify script.js -t 6to5ify --outfile bundle.js

Usage via Node.js

browserify({ debug: true })
  .transform(to5ify);

Or a more complete example:

var fs = require('fs');
var browserify = require('browserify');
var to5ify = require('6to5ify');

browserify({ debug: true })
  .transform(to5ify)
  .require('./script.js', { entry: true })
  .bundle()
  .on('error', function (err) { console.log('Error: ' + err.message); })
  .pipe(fs.createWriteStream("bundle.js"));

Passing Options

$ browserify -d -e script.js -t [ 6to5ify --blacklist generators ]

browserify().transform(to5ify.configure({
  blacklist: ['generators']
}))

More info

For more information see the 6to5ify README

Brunch

See 6to5-brunch's repo for more info. If you find any bugs please report them.

Issues with the output should be reported on the 6to5 issue tracker.

Install

$ npm install --save-dev 6to5-brunch

Configuring

Set 6to5 options in your brunch config (such as brunch-config.coffee) except for filename and sourceMap which are handled internally.

plugins:
  ES6to5:
    whitelist: ['arrowFunctions']
    format:
      semicolons: false

Duo

See duo-6to5's repo for more info. If you find any bugs please report them.

Issues with the output should be reported on the 6to5 issue tracker.

Install

$ npm install --save-dev duo-6to5

Usage via CLI

$ duo --use duo-6to5

Usage via Node.js

Duo(root)
  .entry(entry)
  .use(to5)
  .run(fn);

Gobble

See gobble-6to5's repo for more info. If you find any bugs please report them.

Issues with the output should be reported on the 6to5 issue tracker.

Install

$ npm install --save-dev gobble-6to5

Usage

The options argument, if specified, is passed to 6to5.

var gobble = require('gobble');
module.exports = gobble('src').transform('6to5', options);

Source maps

Sourcemaps are created by default (all the relevant information is filled in by Gobble, you don't need to specify sourceMapName options etc). If you don't want that, pass sourceMap: false.

Grunt

See grunt-6to5's repo for more info. If you find any bugs please report them.

Issues with the output should be reported on the 6to5 issue tracker.

Install

$ npm install --save-dev grunt-6to5

Usage

require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

grunt.initConfig({
  '6to5': {
    options: {
      sourceMap: true
    },
    dist: {
      files: {
        'dist/app.js': 'src/app.js'
      }
    }
  }
});

grunt.registerTask('default', ['6to5']);

Gulp

See gulp-6to5's repo for more info. If you find any bugs please report them.

Issues with the output should be reported on the 6to5 issue tracker.

Install

$ npm install --save-dev gulp-6to5

Usage

var gulp = require('gulp');
var to5 = require('gulp-6to5');

gulp.task('default', function () {
  return gulp.src('src/app.js')
    .pipe(to5())
    .pipe(gulp.dest('dist'));
});

Source maps

Use gulp-sourcemaps like this:

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var to5 = require('gulp-6to5');
var concat = require('gulp-concat');

gulp.task('default', function () {
  return gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(to5())
    .pipe(concat('all.js'))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist'));
});

Webpack

See 6to5-loader's repo for more info. If you find any bugs please report them.

Issues with the output should be reported on the 6to5 issue tracker.

Install

$ npm install --save-dev 6to5-loader

Usage via loader

import Animal from '6to5!./Animal.js';

class Person extends Animal {
  constructor(arg='default') {
    this.eat = 'Happy Meal';
  }
}

export default Person;

var Person = require('6to5!./Person.js').default;
new Person();

Usage via config

module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: '6to5-loader'}
  ]
}

and then import normally:

import Person from './Person.js';

Troubleshooting

For additional information on how to troubleshoot **6to5-loader** please see the README.

Misc

Connect

See 6to5-connect's repo for more info. If you find any bugs please report them.

Issues with the output should be reported on the 6to5 issue tracker.

Install

$ npm install 6to5-connect

Usage

var to5Middleware = require('6to5-connect');

app.use(to5Middleware({
  options: {
    // options to use when transforming files
  },
  src: 'assets',
  dest: 'cache'
}));

app.use(connect.static('cache'));

Jade

See jade-6to5's repo for more info. If you find any bugs please report them.

Issues with the output should be reported on the 6to5 issue tracker.

Install

$ npm install jade-6to5

Usage

var jade = require('jade');
var to5 = require('jade-6to5');

jade.filters.to5 = to5({});

OR

var jade = require('jade');
var to5 = require('jade-6to5');

jade = to5({}, jade);

Now you can use ES6 in your jade templates as following.

script
  :to5
    console.log('Hello World !!!');
    class Person {
      constructor(name) {
        this.name = name;
      }
      sayName(){
        console.log(`Hello, my name is ${this.name}`);
      }
    }
    var person = new Person('Apoxx');
    person.sayName();

Jest

See 6to5-jest's repo for more info. If you find any bugs please report them.

Issues with the output should be reported on the 6to5 issue tracker.

Install

$ npm install --save-dev 6to5-jest

Usage

In your package.json file please make the following changes:

{
  "dependencies": {
    "6to5-jest": "*",
    "jest": "*"
  },
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/6to5-jest",
    "testFileExtensions": ["es6", "js"],
    "moduleFileExtensions": ["js", "json", "es6"]
  }
}

Karma

See karma-6to5-preprocessor's repo for more info. If you find any bugs please report them.

Issues with the output should be reported on the 6to5 issue tracker.

Install

npm install --save-dev karma-6to5-preprocessor

Usage

See 6to5 options for more details.

Given options properties are passed to 6to5 with no change except:

• filename
• sourceMapName
• sourceFileName

Because they should differ from file to file, corresponding configuration functions are available.

For example, inline sourcemap configuration would look like the following.

module.exports = function(config) {
  config.set({
    files: [
      'src/**/*.js',
      'test/**/*.js'
    ],
    preprocessors: {
      'src/**/*.js': ['6to5'],
      'test/**/*.js': ['6to5']
    },
    '6to5Preprocessor': {
      options: {
        sourceMap: 'inline'
      },
      filename: function(file) {
        return file.originalPath.replace(/\.js$/, '.es5.js');
      },
      sourceFileName: function(file) {
        return file.originalPath;
      }
    }
  });
};

Mocha

See 6to5-mocha's repo for more info. If you find any bugs please report them.

Issues with the output should be reported on the 6to5 issue tracker.

Install

$ npm install --save-dev 6to5

Usage

{
  "scripts": {
    "test": "mocha --require 6to5/register"
  },
  "devDependencies": {
    "6to5": "*",
    "mocha": "*"
  }
}