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

【问题标题】：Transpiling ES6 to ES5 with module loading and class inheritance使用模块加载和类继承将 ES6 转换为 ES5
【发布时间】：2015-11-15 10:09:12
【问题描述】：

我正在尝试找到将我的 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; }

我猜这可能是转译器中的一个错误。我希望从以前成功实现继承和模块加载的人那里得到一些指导。或者也许指向我可以查看的当前工作示例。

【问题讨论】：

标签： javascript inheritance ecmascript-6 babeljs

【解决方案1】：

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

这个过程有点乏味，现在我正陷入这个问题；扩展基类的类使用 System.register 调用之前的语句进行转译。

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

模块格式检测

未设置模块格式时，自动基于正则表达式的检测用来。这种模块格式检测永远不会完全准确，但可以满足适合大多数用例。

模块格式检测按以下顺序进行：

System.register / System.registerDynamic 如果源代码以数字开头 cmets，其次是 System.register 或 System.registerDynamic 作为第一个一行代码。

ES 模块 仅当源包含显式模块语法 - 有效的导入或导出语句。

AMD 模块代码中存在有效的 AMD 定义语句。

CommonJS 模块 require(...) 或 exports / module.exports 的存在作业

全局这是上述所有失败后的后备模块格式。

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

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

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

【讨论】：

不错！谢谢你让我走上正轨！在我的情况下，我将index.html 中的代码更改为这个并且它有效！：System.config({ baseURL: 'dist', meta: { 'classes/*': { format: 'register' } } });

【解决方案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>

【讨论】：