Javascript ES6中的导入/导出如何工作？

我正在学习ES6标准，所以我从一个非常基本的示例代码开始

我的第一个文件是

Rectangle.js

class Rectangle {
  perimeter(x, y) {
    return (2 * (x + y));
  }
  area(x, y) {
    return (x * y);
  }
}

export default class { Rectangle };

在另一个文件

solve-1.js

中，我有一些类似的导入

import Rectangle from './Rectangle';

function solveRect(l, b) {
  if (l < 0 || b < 0) {
    console.log(`Rectangle dimensions should be greater than zero:  l = ${l} and b = ${b}`);
  } else {
    console.log(Rectangle.area(l, b));
  }
}

solveRect(2, 4);

报告的错误信息为

/Users/Kulbear/Desktop/NodeBear/Basic/solve-1.js:13
console.log（_Rectangle2.default.area（l，b））；
^
TypeError:_Rectangle2.default.area不是函数
在solveRect（solve-1.js:7:27）
反对。（solve-1.js:12:1）
在模块处编译（Module.js:541:32）
在加载程序中（/usr/local/lib/node_modules/babel cli/node_modules/babel register/lib/node.js:148:5）
at Object.require.extensions.（匿名函数）[as.js]（/usr/local/lib/node_modules/babel cli/node_modules/babel register/lib/node.js:158:7）
在Module.load（Module.js:458:32）
在tryModuleLoad时（module.js:417:12）
在Function.Module.\u加载（Module.js:409:3）
位于Function.Module.runMain（Module.js:575:10）
at/usr/local/lib/node_modules/babel cli/lib/_babel-node.js:160:24

编辑：

我看到两个问题：

这一行：

export default class { Rectangle };

…正在尝试创建一个新类，该类以某种方式包含

Rectangle

。它将无法编译，但您已经在

.babelrc

中包含了第2阶段，因此Babel认为这是尝试创建一个。我想你可能想要：

export default Rectangle;

您没有

矩形。区域（l，b）

。您已经将

区域

定义为

矩形

实例的方法，而不是静态方法。将其更改为静态：

static area() {
    // ...
}

或使用时，请使用实例

从代码中，您需要

静态的

所以把这两件事放在一起（我也做了

周长
静态
）：

Rectangle.js
：

class Rectangle {
  static perimeter(x, y) {
    return (2 * (x + y));
  }
  static area(x, y) {
    return (x * y);
  }
}

export default Rectangle;

import Rectangle from './Rectangle';

function solveRect(l, b) {
  if (l < 0 || b < 0) {
    console.log(`Rectangle dimensions should be greater than zero:  l = ${l} and b = ${b}`);
  } else {
    console.log(Rectangle.area(l, b));
  }
}
solveRect(2, 4);

solve-1.js
：

class Rectangle {
  static perimeter(x, y) {
    return (2 * (x + y));
  }
  static area(x, y) {
    return (x * y);
  }
}

export default Rectangle;

import Rectangle from './Rectangle';

function solveRect(l, b) {
  if (l < 0 || b < 0) {
    console.log(`Rectangle dimensions should be greater than zero:  l = ${l} and b = ${b}`);
  } else {
    console.log(Rectangle.area(l, b));
  }
}
solveRect(2, 4);

请注意，它是一个声明，因此与其他导出不同，它不会以
结尾（；尽管包含一个是无害的）

如果
Rectangle
只有
static
方法，那么它根本没有理由成为一个类；只需使用静态函数的命名导出：

export function perimeter {
    // ...
}
export function area {
    // ...
}

然后，导入人员可以使用命名导入语法，前提是他们只需要以下语法之一：

import area from './Rectangle';

…如果他们想要全部，可以使用命名空间导入：

import * as Rectangle from './Rectangle';

然后使用
Rectangle.area
等

例如，它为模块的用户提供了灵活性

正如T.J.已经说过的，下面这句话没有真正意义：

export default class { Rectangle };

但它是有效的。您实际要做的是导出一个匿名
类
，该类具有as属性
“Rectangle”
，该属性的值是先前定义的
类矩形
的构造函数

因此，导入上述内容时，必须执行以下操作才能使其正常工作：

import Rectangle from './Rectangle';

const rect1 = new Rectangle();
const rect2 = new rect1.Rectangle();
rect2.area(5,5);

当然，这不是你真正想做的。你真正想要的是：

export default Rectangle;

而且，您似乎只需要一些方法，而不是构建一个完整的类。至少在您的示例中，您没有创建
矩形
对象的实例

如果是这种情况，我建议您删除该类并执行以下操作：

export function perimeter (x, y) {
  return (2 * (x + y));
}
export function area(x, y) {
  return (x * y);
}

然后，您可以执行以下操作来导入和使用定义的方法：

import * as Rectangle from './Rectangle';
console.log(Rectangle.area(5,5));

好的，它将在ES2017中有效（并且对OP有效，因为他们已经包括了第2阶段）。从来没有说过它是无效的ES:）我试图解释他的代码实际上做了什么。不，你说它是有效的。我半开玩笑地说，它将在ES2017中有效（并且对OP有效，因为他们在
.babelrc
中包含了第2阶段），但现在无效。如果它没有掉下来，很抱歉。：-）对我来说，再也没有理智的人在写ES5了；“对我来说，再也没有理智的人在写ES5了”是的，但是
类{Rectangle；}
也不是有效的ES2015或ES2016。这就是我的观点。阅读一些关于ES6新功能的文档可能会很有用，例如，现在再阅读一遍，这确实是一个详细的答案，谢谢-
export default Rectangle;

export function perimeter (x, y) {
  return (2 * (x + y));
}
export function area(x, y) {
  return (x * y);
}

import * as Rectangle from './Rectangle';
console.log(Rectangle.area(5,5));