Babel breaks other javascript plugins/frameworks

Question

I am using the Zurb Fonudation framework. When I place a JavaScript framework such as snap.svg in the src/assets/js folder it will automatically get compiled into the app.js file. So far I've had one jQuery plugin that I've tried to use that is broken, and also snap.svg that gets broken. I'm assuming this has something to do with babel. For example with snap.svg I get the following error..

snap.svg.js:420 Uncaught TypeError: Cannot set property 'eve' of undefined

I've tried placing the path to snap.svg in the config.yml file but that doesn't seem to make any difference other than where snap.svg is located within app.js

I'm assuming I'm just not doing something right. Any ideas?

Answer 1

You can tell babel to not transpile particular pieces of code by passing the 'ignore' flag to it within the build process. E.g.:

function javascript() {
  return gulp.src(PATHS.javascript)
  .pipe($.sourcemaps.init())
  .pipe($.babel({ignore: ['src/assets/js/snap.svg']}))
  .pipe($.concat('app.js'))
  .pipe($.if(PRODUCTION, $.uglify()
    .on('error', e => { console.log(e); })
  ))
  .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
  .pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

You can see more about customizing the build process in this forum post: http://foundation.zurb.com/forum/posts/36974-enhancing-foundation-with-bower-components