ECMAScript 2015 and gulp-babel: importing classes
<p>I have a problem with importing (ECMAScript 2015) classes from other files.
My index.js ist very short:</p>

<pre><code>import {Viewer3D} from '/src/viewer3d.js';

var viewer3D = new Viewer3D();
viewer3D.foo();
</code></pre>

<p>and is called properly via a   in index.html, but then it produces: </p>

<p><strong>Uncaught TypeError: Cannot read property 'Viewer3D' of undefined</strong></p>

<p>when trying to call the Viewer3D constructor.</p>

<p>Now if I copy the source of Viewer3D to index.js (removing the import line), all works fine. </p>

<p><strong>But how can I work with multiple JS source files ?</strong></p>

<p>Many thanks for your help.</p>

<hr>

<p>My .babelrc:</p>

<pre><code> {
   "presets": ["es2015"],
   "plugins": [
           "transform-regenerator",
           "transform-object-rest-spread",
           "syntax-async-functions",
           "transform-es2015-modules-umd"
          ]
 }
</code></pre>

<p>The relevant part of my gulpfile.js script:</p>

<pre><code>var sourcemaps = require('gulp-sourcemaps');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var gulp = require('gulp');
var runSequence = require('run-sequence');
var changed = require('gulp-changed');
var plumber = require('gulp-plumber');

...

var source_path = "./src/*.js";

...

gulp.task('build-system', function()
{
 return gulp.src( source_path )
 .pipe(sourcemaps.init())
 .pipe(babel())//Run through babel
 .pipe(sourcemaps.write('.', {
 includeContent: false,
 sourceRoot: function(file) {
 return path.relative(file.path, __dirname);
 }
 }))
 .pipe(gulp.dest("dist"));

});
</code></pre>

<p>The relevant part of my package.json:</p>

<pre><code>"dependencies": {
"babel": "^6.5.2",
"browser-sync": "^2.12.10",
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-changed": "^1.3.0",
"gulp-live-server": "0.0.29",
"gulp-sourcemaps": "^1.6.0",
"proxy-middleware": "^0.15.0",
"run-sequence": "^1.2.1",
"three.js": "^0.77.1"
},
"devDependencies": {
"babel-plugin-transform-es2015-modules-commonjs": "^6.8.0",
"babel-plugin-transform-es2015-modules-umd": "^6.8.0",
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-plugin-transform-regenerator": "^6.9.0",
"babel-preset-es2015": "^6.9.0"
 }
</code></pre>

<p>My minimal viewer3D.js:</p>

<pre><code>export class Viewer3D {
constructor()
{
    console.warn('Called Viewer3D constructor NOW.');
}
foo()
{
    console.warn( 'foo called' );
}
}
</code></pre>

<hr>

<p><strong>Note:</strong>
Of course, I did not bundle the source files in my gulpfile.js script, they are just compiled to the dist folder and served via </p>

<pre><code>gulp.task('serve', ['build'], function() {
browserSync({
                online: false,
                open: false,
                port: 9010,
                server: {
                    baseDir: "dist",             
                    middleware: function (req, res, next)
                    {
                        res.setHeader('Access-Control-Allow-Origin', '*');
                        next();
                    }
                }
            });
});
</code></pre>

<p><strong>Note 2:</strong></p>

<p>I found partial a solution (using webpack) here:</p>

<p><a href="https://github.com/tiagorg/gulp-es6-webpack-example" rel="nofollow">https://github.com/tiagorg/gulp-es6-webpack-example</a></p>

<p>But there are no sourcemaps ... so no debugging is possible... .</p>