如何在一个 es6 模块中创建类并将其导入另一个模块？答案

【问题标题】：How to create class in one es6 module and import it in another?如何在一个 es6 模块中创建类并将其导入另一个模块？
【发布时间】：2017-02-02 21:14:17
【问题描述】：

我有两个文件：User.js 和 Login.js。登录成功后，我想调用 User 类的静态 logIn 方法。我有奇怪的行为。我做错了什么？

文件内容User.js：

// user/User.js

// I also tried export default class User
export class User { 
  static logIn (token) {
  }

  static logOut (token) {
  }

  static isAuthorized () {
  }
}

还有Login.js：

// login/Login.js

import React from 'react';
import GoogleLogin from 'react-google-login';
// I also tried import User from './../user/User';
// I also tried import {User} from './../user/User';
import * as User from './../user/User';

class Login extends React.Component {

  constructor (props, context) {
    super(props, context);
  }

  responseSuccess (googleUser) {
    const idToken = googleUser.getAuthResponse().id_token;
    User.logIn(idToken);
  }

///

}

export default Login;

当我以这种方式使用导入和导出时，我会得到以下行为：

所以，User 是一个具有属性User 的对象。此属性包含 User 类的所有方法。

是否有可能以某种方式导出/导入类，以便我将在User 对象中获取用户类方法？

现在只有一种使用方法的方法：User.User.logIn()。

【问题讨论】：

当您说import * as <NAME> from <LOC> 时，如果说“从文件'x' 中获取所有导出并将它们收集到一个对象中并将该对象导出为”。如果您只是将导入语句更改为 import User from './../user/User' 应该可以工作，因为该类是您的默认导出
是的，这是合乎逻辑的解释。我明白了。它不起作用的问题......我也试过import User from './../user/User'，我只是在那里添加了一个变体。
示例和截图显示的代码不同。

标签： javascript ecmascript-6 es6-modules

【解决方案1】：

您正在使用默认导出，因此使用命名空间导入 (* as User) 您必须使用 User.default 来访问该类。

改为使用默认导入：

import User from './../user/User';

但是，您的屏幕截图表明您实际上是在使用export class User { … } 进行命名导出，而不是默认导出。如果要使用它，则必须导入名称：

import {User} from './../user/User'; // short for {User as User}

也就是说，您可能shouldn't be using a class 无论如何都只包含静态方法。使用多个命名导出

export function logIn(token) {
}
export function logOut(token) {
}
export function isAuthorized() {
}

然后使用命名空间导入

import * as User from './../user/User';

以User.logIn 等身份访问它们。

【讨论】：

我应该如何导出类？我现在得到这个：i.gyazo.com/0ef0f54c0cf87699ee638fd7c7f389f3.png。我没有改变班级的出口。我尝试以这种方式导出类：export class User 和 export default class User
是的，我尝试了不同的变体并感到困惑。
我试过export class User 和import {User} from './../user/User'。我现在收到VM16149:1 Uncaught ReferenceError: User is not defined。
这很奇怪，它应该可以工作。您确定文件以正确的顺序加载（没有循环引用等）吗？
我用文件 src 的链接更新了我的问题。你能检查文件内容吗？实际上我并不认为这会那么难:) 我以为我只需要像import SomeClass from './some/path' 这样的东西，但是哇......

【解决方案2】：

由于您使用的是默认导出，因此无需通过 as 指定别名。

改为使用以下语法导入模块的默认导出：

import User from './../user/User';

the MDN docs 中的更多信息。

【讨论】：

我试过这个。这行不通。 export 应该是什么样子？
我添加了指向 github.com 的链接。你能检查文件内容吗？看起来很奇怪。

【解决方案3】：

从'./../user/User'导入用户；

应该足够了，您没有从该文件中导出更多值

【讨论】：