Babel not running through all JavaScript

Description

When using Riot.js (React/Vue-like component library) it seems my components don’t get transpiled by babel plugin.

Expected behavior

I expected Brunch to compile the JS code as follows:

Compile Riot.js component files into JS -> Run Babel on all JS files -> output JS code.

Actual behavior

It seems the actual behavior is:

Run Babel on .js files -> Compile Riot.js tags (without passing thru Babel) -> output JS code.

Sample repository (run locally)

package.json contents

{
  "name": "showcase",
  "description": "Showcase",
  "private": true,
  "author": "Brunch",
  "version": "0.0.1",
  "repository": "",
  "scripts": {
    "start": "brunch watch --server",
    "build": "brunch build --production"
  },
  "dependencies": {},
  "devDependencies": {
    "@fdaciuk/ajax": "^2.1.5",
    "auto-reload-brunch": "^2",
    "babel-brunch": "^6.1.1",
    "brunch": "^2",
    "clean-css-brunch": "^2",
    "normalize.css": "^5.0.0",
    "riot": "^3.3.2",
    "riot-brunch": "0.0.4",
    "riot-route": "^3.1.0",
    "sass-brunch": "^2.10.2",
    "uglify-js-brunch": "^2"
  }
}

brunch config contents

// See http://brunch.io for documentation.
module.exports = {
  npm: {
    globals: {
      riot: 'riot',
      route: 'riot-route',
      ajax: '@fdaciuk/ajax'
    }
  },
  files: {
    javascripts: {joinTo: 'app.js'},
    stylesheets: {joinTo: 'app.css'}
  },
  plugins: {
    on: ['riot'],
    riot: {
      pattern: /\.tag$/
    }
  },
  babel: {
    presets: ['es2015'],
    plugins: ['transform-async-to-generator']
  },
  modules: {
    autoRequire: { 'app.js': ['initialize'] }
  }
};

---

As Babel plugin simply “jumps” over Riot.js code, what happens is that the output JavaScript remains with pieces of ES6 code.

This also leads to errors when trying to run brunch build --production, as UglifyJS do not play well with ES6.

[shvaikalesh]

It is related to plugin chaining. Fix is coming in 3.0.

PS. Appreciate the <details> thing.

[kazzkiq]

Workaround, in case anyone needs it:

1. Remove uglify-js-brunch package from your package.json;
2. Run: npm install --save-dev closure-compiler-brunch;
3. At your brunch-config.js, add:

...
plugins: {
  closurecompiler: {
    compilationLevel: 'SIMPLE',
    createSourceMap: true
  }
}

1. Then delete your node_modules and run npm install.

Closure Compiler have some basic ES6 support, which means that even with the chaining issues, your ES6 code will still be compiled properly (mostly. There may be issues, more info here).