使用模块加载和类继承将ES6映射到ES5

Question

我正在尝试找到最好的/可行的解决方案,将我的ECMA Script 6代码转换为ES5.我想使用模块加载器并使用继承.我到目前为止最接近的是将Babel 6与es2015预设和transform-es2015-modules-systemjs插件一起使用.这是我的.babelrc档案:

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

我的文件结构如下:

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

内容app.js如下:

import ColorPoint from 'classes/ColorPoint.js';

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

Point.js看起来像这样的定义:

export default class Point {

ColorPoint.js看起来像这样的定义:

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

而且为了完整性,重要的部分index.html看起来像这样:

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

    System.import('app.js');
</script>

我正在使用以下命令将整个src文件夹转换为dist文件夹:

babel src -d dist

问题是Babel在转换ColorPoint.js文件的顶部添加了一行,它在运行时中断了System.js.错误是:

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

但是,当我在此文件的顶部删除此行时,它再次起作用:

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

我想这可能是转换器中的一个错误.我希望得到一些成功实现继承和模块加载的人的指导.或者也许请指出一个我可以看到的当前工作示例.

Answer 1

感谢肯德里克博雅 (Kendrick Burson) 让我走上正轨，我能够解决这个问题。我所需要做的就是更改 System.js 配置中的格式。所以我index.html现在看起来像这样：

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

    System.import('app.js');
</script>