首页 文章

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

提问于
浏览 次
5

我喜欢使用模块加载器并使用继承 . 我到目前为止最接近的是使用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; }

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

javascript inheritance ecmascript-6 babeljs

2 回答

  • 2

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

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

    从模块上的SystemJS文档中可以看出模块格式识别的优先级：

    模块格式检测未设置模块格式时，使用基于自动正则表达式的检测 . 此模块格式检测永远不会完全准确，但适合大多数用例 . 模块格式检测按以下顺序进行：System.register / System.registerDynamic如果源代码以多个注释开头，则后跟System.register或System.registerDynamic作为第一行代码 . ES模块如果源包含显式模块语法 - 有效的导入或导出语句，则仅将源检测为ES模块 . AMD模块代码中存在有效的AMD定义语句 . CommonJS模块需要（...）或exports / module.exports赋值全局这是所有上述失败后的后备模块格式 .

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

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

    我一直在使用 system.config.js 中的meta &&包试图找到魔法咒语来识别我的构建文件夹中的所有 '/*.js'** 文件为 {format: 'register'} 但无法获得glob或路径，或者其他正确的东西 .

    回复于
  • 3

    感谢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>
    回复于

相关问题