javascript - ES6 中的导入/导出是如何工作的？

Question

我正在学习 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);

我正在使用 babel-node 运行这个程序，我确实安装了所需的预设，我的 .babelrc 包含

{
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ],
  "plugins": []
}

报告的错误信息是

/Users/Kulbear/Desktop/NodeBear/Basic/solve-1.js:13
    console.log(_Rectangle2.default.area(l, b));
                                    ^

TypeError: _Rectangle2.default.area is not a function
    at solveRect (solve-1.js:7:27)
    at Object.<anonymous> (solve-1.js:12:1)
    at Module._compile (module.js:541:32)
    at loader (/usr/local/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:148:5)
    at Object.require.extensions.(anonymous function) [as .js] (/usr/local/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:158:7)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Function.Module.runMain (module.js:575:10)
    at /usr/local/lib/node_modules/babel-cli/lib/_babel-node.js:160:24

编辑:

$ node --version
> v6.3.1

Answer 1

我看到两个问题:

1. 这一行:

   export default class { Rectangle };
   

   ...正在尝试创建一个包含 Rectangle 的 new 类。它会编译失败，但是你已经在 .babelrc 中包含了 Stage 2，所以 Babel 认为这是在尝试创建 field .我想你可能想要:

   export default Rectangle;
   

2. 你没有 Rectangle.area(l, b)。您已将 area 定义为 Rectangle instances 的方法，而不是静态方法。将其更改为静态:

   static area() {
       // ...
   }
   

   或当你使用它时，使用一个实例

   var r = new Rectangle();
   r.area(/*...*/);
   

   从代码中，你想要 static。

所以把这两件事放在一起(我也做了perimeter static):

Rectangle.js:

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

export default 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);

作品:

$ babel-node solve-1.js 8

---

A couple of side notes:

1. If you like, you can combine the export and class declaration:

     export default class Rectangle {
         // ...implementaton
     }
   

   请注意，这是一个声明，因此与其他导出不同，它不以 ; 结尾(handy reference ；尽管包含一个是无害的)。

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

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

   然后，导入的人可以使用命名导入语法，如果他们只想要其中之一:

   import area from './Rectangle';
   

   ...如果他们想要所有这些，他们可以使用命名空间导入:

   import * as Rectangle from './Rectangle';
   

   然后使用Rectangle.area之类的。

   例如，它为模块的用户提供了灵 active 。