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

我使用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 

我看到两个问题:

  1. 这一行:

     export default class { Rectangle }; 

    …正在尝试创build一个包含Rectangle类。 它将无法编译,但是你已经将第二阶段包含在.babelrc ,所以Babel认为这是创build一个字段的尝试。 我想你可能想要:

     export default Rectangle; 
  2. 你没有Rectangle.area(l, b) 。 您已经将area定义为Rectangle 实例的方法,而不是静态方法。 将其更改为静态:

     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

一些附注:

  1. 如果你喜欢,你可以结合出口和类声明:

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

    请注意,这是一个声明,所以不像其他出口,它不会以; ( 方便参考 ,虽然包括一个是无害的)。

  2. 如果Rectangle 只有 static方法,那么它根本就不是一个类。 只需使用静态函数的命名导出:

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

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

     import area from './Rectangle'; 

    …如果他们想要所有的人,他们可以使用命名空间导入:

     import * as Rectangle from './Rectangle'; 

    然后使用Rectangle.area等。

    例如,它给用户模块的灵活性。

正如TJ已经说过的那样,下面这一行并没有什么意义:

 export default class { Rectangle }; 

但这是有效的JS。 你实际做的是导出一个具有属性"Rectangle"的匿名class ,这个属性的值是你以前定义的class Rectangle的构造函数。

所以当你导入上面的时候,你需要做以下的工作才能正常工作:

 import Rectangle from './Rectangle'; const rect1 = new Rectangle(); const rect2 = new rect1.Rectangle(); rect2.area(5,5); 

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

 export default Rectangle; 

另外,看起来你只是想要一些方法而不是构build一个整体的类。 至less在你的例子中,你没有创build一个Rectangle对象的实例。

如果是这种情况,我build议你删除类,并做这样的事情:

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