重大な変更: Babel 6 エクスポートのデフォルト動作

Babel 6 のリリースにより、デフォルトのエクスポートの処理方法に大幅な変更が実装されました。 。 Babel は以前 module.exports = exports["default"] という行を追加していましたが、この機能は削除されました。

この変更により、モジュール インポート構文の変更が必要になります。以前は、従来の構文を使用してコードを作成していました:

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

次の構文を使用する必要があります:

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

この調整は些細なように見えるかもしれませんが、以前のエクスポート メカニズムに重大なコード依存関係があるプロジェクトにとっては課題となる可能性があります。

回避策

従来のエクスポート動作が必要な場合は、CommonJS を直接使用することをお勧めします。あるいは、カスタム プラグインを使用して、必要な互換性を提供することもできます。このプラグインの機能は、おそらく Babel 6 で削除された動作を反映し、トランスパイルされた出力に module.exports = exports["default"] 行を追加します。

名前付きエクスポートの影響

自動 module.exports 割り当ての削除により ES6 セマンティクスが改善され、潜在的な混乱が防止されることは注目に値します。名前付きエクスポートは、デフォルトのエクスポートに誤って割り当てられることなく、期待どおりに動作するようになりました。

例

次のコードは、Babel 5 と Babel 6 のエクスポート動作の違いを示しています。

// Input
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 出力

"use strict";

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

ご覧のとおり、出力の唯一の違いは、Babel 6 には module.exports = exports["default"] が存在しないことです。