Как работает импорт/экспорт в ES6?

Ответ 1

Я вижу две проблемы:

• Эта строка:

  export default class { Rectangle };
  

  ... пытается создать новый класс, содержащий Rectangle. Это не скомпилировалось, но вы включили Stage 2 в свой .babelrc, и поэтому Babel считает попыткой создать field, Я думаю, вы, вероятно, захотите:

  export default Rectangle;
  

• У вас нет 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

Несколько примечаний:

• Если вам нравится, вы можете объединить декларацию экспорта и класса:

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

  Обратите внимание, что это декларация, так что в отличие от других экспонатов, она не заканчивается ; (полезной ссылкой, хотя включение одного из них безвредны).

• Если Rectangle имеет только методы static, нет никаких оснований для того, чтобы он был классом вообще; просто используйте именованный экспорт ваших статических функций:

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

  Затем люди, импортирующие, могут использовать именованный синтаксис import, если они просто хотят одного из них:

  import area from './Rectangle';
  

  ... и если они хотят все из них, они могут использовать импорт пространства имен:

  import * as Rectangle from './Rectangle';
  

  а затем используйте Rectangle.area или такой.

  Например, он предоставляет пользователю гибкость модуля.

Ответ 2

Как T.J. уже сказано, следующая строка не имеет смысла:

export default class { Rectangle };

Но допустимо JS. Фактически вы делаете экспорт анонимного class, который имеет свойство "Rectangle", а значение этого свойства является конструктором для вашего ранее определенного class Rectangle.

Поэтому, когда вы импортируете вышеуказанное, вам нужно будет сделать следующее, чтобы он работал правильно:

import Rectangle from './Rectangle';

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

Конечно, это не то, что вы хотели сделать. Вы действительно хотите:

export default Rectangle;

Кроме того, кажется, что вам просто нужны некоторые методы, а не целостный класс. По крайней мере, в вашем примере вы не создаете экземпляр объекта 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));