使用 Babel 转译器导入类并调用带有 ES6 模块的静态方法

import class and call static method with es6 modules with babel transpiler

本文关键字：ES6 模块 静态方法 调用 Babel 导入 使用      更新时间：2023-09-26

我有以下类定义：

class EmberReflux{
  static createActions(actions) {
    console.log(actions);
  }
}
export { EmberReflux };

当我从其他文件导入它时：

import EmberReflux from '../utils/ember-reflux';
let TodoActions = EmberReflux.createActions(
[
  "addItem",
  "undo",
  "redo"
]);
export { TodoActions };

转译看起来像这样

define('ember-reflux/utils/todo-actions', ['exports', 'ember-reflux/utils/ember-reflux'], function (exports, EmberReflux) {
    'use strict';
    var TodoActions = EmberReflux['default'].createActions(["addItem", "undo", "redo"]);
    exports.TodoActions = TodoActions;
});

我不确定EmberReflux['default']的默认值是什么

我想像这样调用静态类方法：

EmberReflux.createActions

但相反，我必须这样称呼它：

EmberReflux.EmberReflux.createActions

您有两个选择：

  1. 像您一样导出EmberReflux：

    export { EmberReflux };

    然后像这样导入它：

    import { EmberReflux } from '../utils/ember-reflux';

  2. 导出时使用default：

    export default EmberReflux;

    并导入它（就像您正在做的那样）：

     import EmberReflux from '../utils/ember-reflux';

在这两种情况下，您都可以像以下方式使用EmberReflux：

EmberReflux.createActions();

我没有足够的声誉来评论，alexpods的答案是完美的，但为了理解我们的朋友Ced问道：

为什么我们需要第二个示例中的默认值？换句话说，为什么我们不能直接出口EmberReflux？

当你这样写时：

export { EmberReflux };

也是这样写的：

export { EmberReflux: EmberReflux };

这就是为什么你需要运行EmberReflux.EmberReflux，解决方案非常简单：

export default EmberReflux;

class EmberReflux {
    //...
}
module.exports = EmberReflux
相关文章：