javascript - 使用模块加载和类继承将 ES6 转换为 ES5

Question

我正在尝试找到将我的 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 中有更多可用的语言功能，所以我决定切换。

这个过程有点乏味，现在我在这个问题上陷入困境；扩展基类的类使用 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:

1. 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.

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

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

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

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

因此，由于 babel 转译器在文件头部添加了上述行，因此自动检测继承类失败。

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

我一直在玩弄 meta && packages system.config.js 试图找到识别所有 的魔法咒语>'**/*.js' 我的构建文件夹中的文件为{format: 'register'} 但无法获得 glob、路径或完全正确的东西。