Babel 6은 기본값을 내보내는 방법을 변경합니다.

Babel 6은 기본값을 내보내는 방법을 변경합니다.

전에, 바벨은 선을 추가했습니다.module.exports = exports["default"]더 이상 이렇게 할 수 없습니다.내가 할 수 있기 전에 이것이 의미하는 것은:

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

이제 저는 이것을 해야 합니다.

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

큰 문제는 아닙니다. (그리고 저는 이것이 처음부터 그랬어야 했다고 생각합니다.)문제는 제가 예전에 작동하는 방식에 의존하는 코드가 많다는 것입니다(대부분을 ES6 가져오기로 변환할 수 있지만 전부는 아닙니다).제 프로젝트를 수행하고 이 문제를 해결할 필요 없이 오래된 방법을 작동시키는 방법에 대한 팁을 줄 수 있는 사람이 있습니까(또는 이를 위한 코드 모드를 작성하는 방법에 대한 지침도 꽤 유용할 것입니다).

감사합니다!

예:

입력:

const foo = {}
export default foo

바벨 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 모듈에 대한 오해, Babel 업그레이드, Tears 및 솔루션

CommonJS 내보내기 동작을 사용하려면 Common을 사용해야 합니다.JS를 직접 사용하거나 다른 답변에 플러그인을 사용합니다.이 동작은 혼란을 야기하고 일부 사람들이 의존했던 ES6 의미론을 무효화하기 때문에 제거되었습니다.

export default {
  a: 'foo'
};

그리고 나서.

import {a} from './foo';

유효하지 않은 ES6이지만 공통점 때문에 작동했습니다.당신이 설명하고 있는 JS 상호운용성 동작.불행히도 두 사례를 모두 지원하는 것은 불가능하며, 사람들이 잘못된 ES6를 작성하도록 허용하는 것은 당신을 그렇게 만드는 것보다 더 나쁜 문제입니다..default.

다른 문제는 사용자가 나중에 명명된 내보내기를 추가할 경우 예기치 않은 문제입니다.

export default 4;

그리고나서

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

그렇지만

export default 4;
export var foo = 5;

그리고나서

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

이 플러그인을 사용하여 이전 플러그인을 가져올 수도 있습니다.export되받아치는 행동

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

저는 보통 진입점이 있습니다.index.js메인 필드에서 가리키는 파일입니다.package.jsonlib의 실제 진입점을 다시 내보내는 것 외에는 다른 작업이 없습니다.

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

바벨 문제를 해결하기 위해, 나는 이것을 로 변경했습니다.import문을 지정한 다음 기본값을 에 할당합니다.module.exports:

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

다른 모든 파일은 해결 방법 없이 순수 ES6 모듈로 유지됩니다.그래서 진입점만 살짝 변경하면 됩니다 :)

이것은 commonjs 요구에 대해서도 작동할 것이고, 또한 ES6 가져오기에도 작동할 것입니다. 왜냐하면 babel은 역 interop(commonjs -> es6)을 떨어뜨린 것 같지 않기 때문입니다.Babel은 commonjs를 패치하기 위해 다음 기능을 주입합니다.

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

저는 이것과 싸우는 데 몇 시간이 걸렸기 때문에, 저는 이것이 다른 누군가의 노력을 덜어주기를 바랍니다!

저는 그런 종류의 문제가 있었습니다.이것이 제 해결책입니다.

//src/arithmetric.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);

언급URL : https://stackoverflow.com/questions/33505992/babel-6-changes-how-it-exports-default