Porting ES6 to ES5 with module loading and class inheritance

Question

I am trying to find a better / working solution to forward my ECMA Script 6 code to ES5. I would like to use the module loader and use inheritance. The closest thing I have so far is to use Babel 6 with preinstalled es2015 and transform-es2015-modules-systemjs plugin. Here is my .babelrc file:

 { "presets": ["es2015"], "plugins": ["transform-es2015-modules-systemjs"] } 

And my files are structured as follows:

 - dist (transpiled files in the same structure as the src folder) - src - classes - Point.js - ColorPoint.js app.js index.html 

The content of app.js as follows:

 import ColorPoint from 'classes/ColorPoint.js'; let cp = new ColorPoint(25, 8, 'green'); console.log(cp.toString()); // '(25, 8) in green' 

The definition of Point.js as follows:

 export default class Point { 

And the definition of ColorPoint.js looks like this:

 import Point from 'classes/Point.js'; export default class ColorPoint extends Point { 

And just for completeness, the important part of index.html looks like this:

 <script src="node_modules/systemjs/dist/system.js"></script> <script> System.config({ baseURL: 'dist' }); System.import('app.js'); </script> 

I transfer the entire src folder to the dist folder using the command:

 babel src -d dist 

The problem is that Babel adds one line to the top of the transpiled ColorPoint.js file, which splits System.js at runtime. Error:

 Uncaught Error: Module http://localhost/es6-tutorial/dist/classes/ColorPoint.js interpreted as global module format, but called System.register. 

But when I delete this line at the top of this file, it works again:

 function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj; } 

I guess this might be a bug in the transpiler. I hope to get some recommendations from someone who has successfully implemented module inheritance and loading before. Or maybe give me a current working example that I can look at.

Answer 1

Thanks to Kendrick Burson, who set me on the right track, I was able to solve this. All I had to do was change the format in the System.js configuration. So my index.html now looks like this:

 <script src="node_modules/systemjs/dist/system.js"></script> <script> System.config({ baseURL: 'dist', meta: { 'classes/*': { format: 'register' } } }); System.import('app.js'); </script> 

Answer 2

Wow, I have the same problem! I used traceur to outperform my code just fine, and everything went well over the past year, but the trace is not very active, and babel has more language features, so I decided to switch.

The process was a bit tedious, and now I am falling for this very problem; a class that extends the base class is translated with an instruction that precedes a call to System.register.

SystemJS documents on the modules indicate the priority of identifying the module format:

Module format detection

If the module format is not installed, automatic regular expression detection is used. This definition of module format is never completely accurate, but it serves well for most use cases.

Module format detection occurs in the following order:

• System.register /System.registerDynamic If the source code starts with the number of comments, then System.register or System.registerDynamic as the first line of code.

• ES Modules A source is only detected as an ES module if it contains explicit module syntax — valid import or export operations.

• AMD The code contains a valid AMD define statement.

• CommonJS Modules . The presence of require (...) or export / module.exports Purpose

• Global This is the backup module format after all of the above errors do not work.

Thus, automatic detection fails with the inherited classes, since the babel transponder adds the specified line to the beginning of the file.

What should happen, add the configuration to tell systemjs that these compiled js files are in register format.

I played with meta && packages in system.config.js , trying to find a magic spell to identify all the '** / * files . js' in my build folder as {format: 'register'} , but cannot get glob, path or something completely correct.