Babel 6 の修正されたデフォルトのエクスポート動作: 利便性からセマンティック一貫性への移行

画期的な変更として、Babel 6 はそのアプローチを修正しました。デフォルト値をエクスポートし、以前の CommonJS に触発された動作から厳密な ES6 原則への移行を導入します。この変更は、開発者にチャンスと課題の両方をもたらしました。

以前、Babel はデフォルトのエクスポート宣言に行「module.exports = exports['default']」を追加し、開発者が「require(」としてアクセスできるようにしていました。 './foo')" を直接呼び出します。しかし、Babel 6 では、この慣行は廃止されました。現在、デフォルトのエクスポートにアクセスするには、明示的な命名規則が必要です: "require('./foo').default".

影響と回避策

この変更により、以前の動作に依存していたプロジェクトではコードを変更する必要があります。多くの場合、ES6 インポート/エクスポート構文を採用することが望ましいですが、一部のレガシー コードでは代替ソリューションが必要になる場合があります。

手動修正を必要とせずに古い機能を維持するには、「babel-plugin-add-module-」を使用できます。エクスポート」プラグイン。このプラグインは、「module.exports = exports['default']」行を再挿入し、Babel 6 以前のエクスポート メカニズムをエミュレートします。

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;

結論

Babel 6 の修正されたデフォルトのエクスポート動作により、ES6 セマンティクスへの準拠が保証され、一貫性が促進され、混乱が回避されます。多少のコード​​調整は必要ですが、最終的には最新の JavaScript 標準と実践の採用に貢献します。