전에, babel은 줄을 추가 할 것 module.exports = exports["default"]입니다. 더 이상이 작업을 수행하지 않습니다. 이것이 의미하는 것은 내가 할 수 있기 전에입니다.

var foo = require('./foo');
// use foo

이제이 작업을 수행해야합니다.

var foo = require('./foo').default;
// use foo

큰 문제는 아닙니다. 문제는 작동하는 방식에 따라 많은 코드가 있다는 것입니다 (대부분의 코드를 ES6 가져 오기로 변환 할 수는 있지만 전부는 아닙니다). 누구나 내 프로젝트를 거치지 않고 이전 방식으로 작업하는 방법에 대한 팁을 줄 수 있습니까 (또는 코드 모드를 작성하는 방법에 대한 지침조차도 매우 매끄 럽습니다).

감사!

예:

입력:

const foo = {}
export default foo

Babel 5를 사용한 출력

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;
module.exports = exports["default"];

Babel 6 및 es2015 플러그인을 사용한 출력 :

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;

출력의 유일한 차이점은 module.exports = exports["default"]입니다.

편집하다

: 당신은 내 특정 문제를 해결 한 후 쓴이 블로그 게시물에 관심이있을 수 있는 솔루션 바벨, 눈물을 업그레이드 오해 ES6 모듈, 및

이 플러그인 을 사용 하여 이전 export동작을 되돌릴 수도 있습니다.

CommonJS 내보내기 동작을 원하면 CommonJS를 직접 사용해야합니다 (또는 다른 답변에서 플러그인을 사용해야 함). 이 행동은 혼란을 야기하고 일부 사람들이 의존했던 잘못된 ES6 시맨틱 스로 이어지기 때문에 제거되었습니다.

export default {
  a: 'foo'
};

그리고

import {a} from './foo';

이는 유효하지 않은 ES6이지만 설명하는 CommonJS 상호 운용성 동작으로 인해 작동했습니다. 불행히도 두 경우를 모두 지원하는 것은 불가능하며 사람들이 잘못된 ES6를 작성하도록 허용하는 것은 당신을 만드는 것보다 더 나쁜 문제 .default입니다.

다른 문제는 사용자가 나중에 명명 된 내보내기를 추가 할 경우 예상치 못한 결과라는 것입니다.

export default 4;

그때

require('./mod');
// 4

그러나

export default 4;
export var foo = 5;

그때

require('./mod')
// {'default': 4, foo: 5}

라이브러리 작성자의 경우이 문제를 해결할 수 있습니다.

나는 일반적으로 index.js의 메인 필드에서 가리키는 파일 인 진입 점을 가지고 있습니다 package.json. lib의 실제 진입 점을 다시 내보내는 것 외에는 아무것도하지 않습니다.

export { default } from "./components/MyComponent";

babel 문제를 해결하기 위해 이것을 import명령문으로 변경 한 다음 기본값을 다음과 같이 지정했습니다 module.exports.

import MyComponent from "./components/MyComponent";
module.exports = MyComponent;

다른 모든 파일은 해결 방법없이 순수한 ES6 모듈로 유지됩니다. 따라서 진입 점 만 약간 변경해야합니다. :)

babel이 리버스 interop (commonjs-> es6)을 삭제하지 않은 것 같으므로 commonjs 요구 사항 및 ES6 가져 오기에서도 작동합니다. Babel은 commonjs를 패치하기 위해 다음 함수를 주입합니다.

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 

나는 이것을 싸우는 데 몇 시간을 보냈으므로 다른 누군가의 노력을 구할 수 있기를 바랍니다!

나는 그런 종류의 문제를 겪었다. 그리고 이것은 내 해결책입니다.

//src/arithmetic.js

export var operations = {
  add: function (a, b) {
      return a + b;
  },

  subtract: function (a, b) {
      return a - b;
  }
};

//src/main.js

import { operations }  from './arithmetic';

let result = operations.add(1, 1);

console.log(result);