Module AMD/CommonJS/Browser Global not working

[york-xtrem]

I suspect it is for Babel but not sure.

How can we reproduce this bug?

1. Git clone https://github.com/zurb/foundation-zurb-template projectname
2. Install:
   npm install gsap --save-dev
   bower install scrollmagic --save-dev
3. Add text line config.yml:
   • "node_modules/gsap/src/uncompressed/TweenMax.js"
   • "bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js"
   • "bower_components/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js"
   • "bower_components/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js"
   • "bower_components/scrollmagic/scrollmagic/uncompressed/plugins/jquery.ScrollMagic.js"
4. npm start

What happened instead?
In console Google Chrome:
Uncaught TypeError: Cannot set property 'ScrollMagic' of undefined

Google Chrome:

Firefox:

[york-xtrem]

I found the problem but not solve it.

• 1 Answer of Stackoverflow

When using Babel 6 and babel-preset-es2015 (or Babel 5), Babel by default assumes that files it processes are ES6 modules. The thing that is causing you trouble is that in an ES6 module, this is undefined, whereas in the "script" case, this varies depending on the environment, like window in a browser script or exports in CommonJS code.

The problem is that I have files in ES6 and others not.
Would have to separate files here? How?

// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .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'));
}

Why wrong? Explanation...

Change the file javascript.

Change this to undefined

Besides this:

} else if (typeof exports === 'object') {

}(this, function () {
    "use strict";

    var ScrollMagic = function () {

to

} else if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {

})(undefined, function () {
    "use strict";

    var ScrollMagic = function ScrollMagic() {

Code fragment:

Before doing so:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(factory);
    } else if (typeof exports === 'object') {
        // CommonJS
        module.exports = factory();
    } else {
        // Browser global
        root.ScrollMagic = factory();
    }
}(this, function () {
    "use strict";

    var ScrollMagic = function () {

After doing so:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(factory);
    } else if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {
        // CommonJS
        module.exports = factory();
    } else {
        // Browser global
        root.ScrollMagic = factory();
    }
})(undefined, function () {
    "use strict";

    var ScrollMagic = function ScrollMagic() {

[york-xtrem]

Sorry for the inconvenience, it was my problem.

My solution if you want to compile SS5 SS6 and preserving sourcemaps, using Gulp-filter:

foundation/foundation-zurb-template#43