Our goal was to use babels transpilation only for the import/export statements and let the browser handle features such as classes / async natively.
Therefore we used the following options:
var defaultBabelOptions = {
modularRuntime: true,
sourceMaps: true,
es2015: false,
stage3: false,
stage2: false,
stage1: false,
compact: false,
comments: true
};
This works reasonably well, but we found the following issue. The class Foo is not in the scope the exported function greet.
export class Foo {
static greet() {
return "Hi"
}
}
export function greet() {
return Foo.greet()
}
Because it gets transpiled to:
(function(System, SystemJS) {System.register([], function (_export, _context) {
"use strict";
function greet() {
return Foo.greet();
}
_export("greet", greet);
return {
setters: [],
execute: function () {
class Foo {
static greet() {
return "Hi";
}
}
_export("Foo", Foo);
}
};
});
})
This will result in a runtime error when calling greet.
Uncaught (in promise) ReferenceError: Foo is not defined
at ModuleNamespace.greet (tanspilationbug.js:7)
at System.import.then.m (eval at resolve (juicy-ace-editor.js!transpiled:NaN), <anonymous>:1:55)