javascript 자바스크립트에서 ES6에서 가져 오기/내보내기는 어떻게 작동합니까?




자바스크립트에서 자바스크립트 import (2)

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

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;

또한 전체 클래스를 구성하는 대신 몇 가지 메소드 만 원하는 것처럼 보입니다. 적어도 당신의 예제에서는 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));

두 가지 문제가 있습니다.

  1. 이 행 :

    export default class { Rectangle };

    ... 어떤 식 으로든 Rectangle 포함하는 클래스를 만들려고합니다. 컴파일하는 데 실패하지만, .babelrc 2 단계가 포함되어 있기 때문에 Babel은 필드 를 만들려고한다고 생각 합니다 . 아마 네가 원한다고 생각해.

    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. Rectanglestatic 메소드 만있는 경우에는 클래스가 될 이유가 없습니다. 정적 함수의 명명 된 내보내기를 사용하십시오.

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

    그렇다면 가져 오기 사용자는 그 중 하나만 원할 경우 명명 된 가져 오기 구문을 사용할 수 있습니다.

    import area from './Rectangle';

    ... 그리고 그들 모두를 원한다면, 그들은 namespace import를 사용할 수 있습니다 :

    import * as Rectangle from './Rectangle';

    그런 다음 Rectangle.area 등을 사용하십시오.

    예를 들어, 사용자에게 모듈 유연성을 제공합니다.





ecmascript-6