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

哇，我有同样的问题！我正在使用traceur转换我的代码就好了，过去一年里的情况一直很好，但是traceur不是很活跃，而且babel有更多的语言功能，所以我决定转换。

这个过程有点乏味，现在我在这个问题上堕落了;扩展基类的类使用在System.register调用之前的语句进行转换。

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

模块格式检测

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

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



System.register / System.registerDynamic如果源代码以数字开头   注释，然后是 System.register 或System.registerDynamic 作为第一个   代码行。



ES模块如果源包含显式，则仅将源检测为ES模块   模块语法 - 有效的导入或导出语句。



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



CommonJS 模块存在require（...）或exports / module.exports   分配



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

因此，自动检测失败并继承了类，因为babel转换器在文件的头部添加了提到的行。

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

我一直在玩 meta ＆amp;＆amp; system.config.js 中的 packages 试图找到魔法咒语，以识别我的构建文件夹中的所有'** / *。js'文件如 {format：'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>

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

2 个答案:

模块格式检测