使用模块加载和 class 继承将 ES6 转换为 ES5

Question

我正在尝试找到 best/working 将我的 ECMA Script 6 代码转换为 ES5 的解决方案。我想使用模块加载器并利用继承。到目前为止，我最接近的是使用带有 es2015 预设和 transform-es2015-modules-systemjs 插件的 Babel 6。这是我的 .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

哇，我遇到了同样的问题！我一直在使用 traceur 来转译我的代码，并且在过去的一年里运行一切都很好，但是 traceur 不是很活跃并且 babel 中有更多可用的语言功能，所以我决定切换。

这个过程有点乏味，现在我在这个问题上陷入困境；扩展基础 class 的 class 与 System.register 调用之前的语句一起转译。

在模块的 SystemJS 文档中，它说明了模块格式识别的优先级：

Module format detection

When the module format is not set, automatic regular-expression-based detection is used. This module format detection is never completely accurate, but caters well for the majority use cases.

The module format detection happens in the following order:

System.register / System.registerDynamic If the source code starts with a number of comments, followed by System.register or System.registerDynamic as the first line of code.

ES modules The source is only detected as an ES module if it contains explicit module syntax - valid import or export statements.

AMD modules The presence of a valid AMD define statement in the code.

CommonJS modules The presence of require(...) or exports / module.exports assignments

Global This is the fallback module format after all the above fail.

因此，由于 babel 转译器在文件头部添加了提到的行，因此自动检测因继承 classes 而失败。

需要做的是添加一个配置来告诉 systemjs 那些编译后的 js 文件是 register 格式。

我一直在玩 meta && packages in system.config.js试图找到神奇的咒语来识别我的构建文件夹中的所有 '**/*.js' 文件 {格式：'register'} 但无法获取 glob、路径或其他完全正确的内容。

Answer 2

感谢 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>

使用模块加载和 class 继承将 ES6 转换为 ES5

Transpiling ES6 to ES5 with module loading and class inheritance

javascript

inheritance

ecmascript-6

babeljs

Module format detection