carrot / roots-browserify

Roots v3 extension that uses browserify as a javascript pipeline
Other
21 stars 8 forks source link

Babelify transform not working #27

Closed sethkrasnianski closed 8 years ago

sethkrasnianski commented 8 years ago

When using the following app.coffee, babelify is ignored and doesn't transform the es6 code to es5.

axis         = require 'axis'
rupture      = require 'rupture'
autoprefixer = require 'autoprefixer-stylus'
browserify   = require 'roots-browserify'
css_pipeline = require 'css-pipeline'

module.exports =
  ignores: ['readme.md', '**/layout.*', '**/_*', '.gitignore', 'ship.*conf']

  extensions: [
    browserify(
      files: "assets/js/main.js"
      out: 'js/main.js'
      transforms: ['babelify']
    )
    css_pipeline(files: 'assets/css/*.styl')
  ]

  stylus:
    use: [axis(), rupture(), autoprefixer()]
    sourcemap: true

  jade:
    pretty: true

It transforms this

(() => {
  console.log('welcome');
})();

to this

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
(() => {
  console.log('welcome');
})();

},{}]},{},[1]);
jescalan commented 8 years ago

Doesn't seem like an issue with roots-browserify specifically. Other transforms work fine, are you sure this isn't a problem with the transform or the way you are passing it in?

Also you can just npm install babel and use a .jsx file extension to have it to its thing.

samueljseay commented 8 years ago

The issue here is that Babel as of 6.0.0 ships with no presets. It won't compile your code the way you expect without the es2015 preset.

@sethkrasnianski the solution to this is to npm install babel-preset-es2015

and then in app.coffee do

babelify = require('babelify').configure({ presets: ['es2015'] })

module.exports =
  extensions: [
    browserify(files: 'assets/js/main.js', out: 'js/my-file.js', transforms: babelify)
  ]
sethkrasnianski commented 8 years ago

:+1: Sounds like a solution. I'll close this for now.