## Node.js ### CLI **Install** ```sh $ npm install --global 6to5 ``` **Usage** ```sh $ 6to5 script.js ```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.
### Require Hook **Install** ```sh $ 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](polyfill.md) is also required. ```javascript require('6to5/register'); ```For full documentation on the 6to5 CLI see the usage docs.
## Rails ### SprocketsFor full documentation on the 6to5 require hook see the usage docs.
**Install** ```sh $ gem install sprockets-es6 ``` **Usage** ```rb # Gemfile gem 'sprockets' gem 'sprockets-es6' ``` ```rb require 'sprockets/es6' ``` ## Build Systems ### BrocolliSee 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** ```sh $ npm install --save-dev broccoli-6to5-transpiler ``` **Usage** ```js var to5Transpiler = require('broccoli-6to5-transpiler'); var scriptTree = to5Transpiler(inputTree, options); ```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.
### BrowserifySource maps
Currently this plugin only support inline source maps. If you need separate source map feature, we welcome you to submit a pull request.
**Install** ```sh $ npm install --save-dev 6to5ify ``` **Usage via CLI** ```sh $ browserify script.js -t 6to5ify --outfile bundle.js ``` **Usage via Node.js** ```js browserify({ debug: true }) .transform(to5ify); ``` Or a more complete example: ```js 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** ```sh $ browserify -d -e script.js -t [ 6to5ify --blacklist generators ] ``` ```js browserify().transform(to5ify.configure({ blacklist: ['generators'] })) ```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.
### BrunchMore info
For more information see the 6to5ify README
**Install** ```sh $ 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. ```coffee plugins: ES6to5: whitelist: ['arrowFunctions'] format: semicolons: false ``` ### DuoSee 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** ```sh $ npm install --save-dev duo-6to5 ``` **Usage via CLI** ```sh $ duo --use duo-6to5 ``` **Usage via Node.js** ```js Duo(root) .entry(entry) .use(to5) .run(fn); ``` ### GobbleSee 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** ```sh $ 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`. ### GruntSee 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** ```sh $ npm install --save-dev grunt-6to5 ``` **Usage** ```js 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']); ``` ### GulpSee 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** ```sh $ npm install --save-dev gulp-6to5 ``` **Usage** ```js 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](https://github.com/floridoo/gulp-sourcemaps) like this: ```js 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')); }); ``` ### WebpackSee 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** ```sh $ npm install --save-dev 6to5-loader ``` **Usage via loader** ```js import Animal from '6to5!./Animal.js'; class Person extends Animal { constructor(arg='default') { this.eat = 'Happy Meal'; } } export default Person; ``` ```js var Person = require('6to5!./Person.js').default; new Person(); ``` **Usage via config** ```js module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: '6to5-loader'} ] } ``` and then import normally: ```js import Person from './Person.js'; ```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.
## Misc ### ConnectTroubleshooting
For additional information on how to troubleshoot **6to5-loader** please see the README.
**Install** ```js $ npm install 6to5-connect ``` **Usage** ```js var to5Middleware = require('6to5-connect'); app.use(to5Middleware({ options: { // options to use when transforming files }, src: 'assets', dest: 'cache' })); app.use(connect.static('cache')); ``` ### JadeSee 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** ```js $ npm install jade-6to5 ``` **Usage** ```js var jade = require('jade'); var to5 = require('jade-6to5'); jade.filters.to5 = to5({}); ``` OR ```js var jade = require('jade'); var to5 = require('jade-6to5'); jade = to5({}, jade); ``` Now you can use ES6 in your jade templates as following. ```jade 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(); ``` ### JestSee 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** ```sh $ 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": "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** ```js 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. ```js 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; } } }); }; ``` ### MochaSee 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** ```sh $ npm install --save-dev 6to5 ``` **Usage** ```js { "scripts": { "test": "mocha --require 6to5/register" }, "devDependencies": { "6to5": "*", "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.