web-dev-qa-db-ja.com

Babel 6はデフォルトのエクスポート方法を変更

以前は、babelはmodule.exports = exports["default"]という行を追加していました。それはもうこれをしません。これが何を意味するかは私ができる前に：

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

今、私はこれをしなければなりません：

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

それほど大したことではありません（そして、私はこれがすべてに沿って行われるべきだったことだと思います）。問題は、以前はうまく機能していた方法に依存したコードがたくさんあることです（そのほとんどをES6インポートに変換できますが、すべてには変換できません）。誰かが私のプロジェクトを通過してこれを修正しなくても昔のやり方でうまくいくようにするためのヒントを教えてもらえますか（またはこれを行うためのcodemodの書き方についての指示でさえもかなり滑らかです）。

ありがとうございます。

例：

入力：

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モジュールの誤解、Babelのアップグレード、涙、そして解決策

ecmascript-6commonjsbabeljs
190
kentcdodds

this plugin を使用して、古いexportの動作を元に戻すこともできます。

89
SimenB

あなたがCommonJSのエクスポートの振る舞いをしたいのなら、あなたは直接CommonJSを使う必要があるでしょう（あるいは他の答えでプラグインを使う）。混乱を引き起こし、無効なES6セマンティクスにつながるため、この動作は削除されました。

export default {
  a: 'foo'
};

その後

import {a} from './foo';

eS6は無効ですが、説明しているCommonJSの相互運用性の動作のために機能しました。残念ながら両方のケースをサポートすることは不可能です、そして、無効なES6を書くことを人々に許すことはあなたに.defaultをさせるより悪い問題です。

もう1つの問題は、将来、名前付きエクスポートを追加した場合、ユーザーにとって予期しないことでした。

export default 4;

それから

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

しかし

export default 4;
export var foo = 5;

それから

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

図書館の作家にとっては、この問題を回避できるかもしれません。

私は通常エントリポイントindex.jsを持っています。これはpackage.jsonのメインフィールドから指すファイルです。それはlibの実際のエントリポイントを再エクスポートすること以外何もしません：

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

Babelの問題を回避するために、これをimportステートメントに変更してから、デフォルトをmodule.exportsに割り当てます。

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

他のすべてのファイルは純粋なES6モジュールのままですが、回避策はありません。エントリポイントだけが少し変更を必要とします:)

これはcommonjs requireやES6のインポートでもうまくいきます。babelは逆相互運用機能を削除していないようです（commonjs - > es6）。 Babelはcommonjsを修正するために次の関数を注入します。

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

私はこれと戦うのに何時間も費やしたので、これが他の誰かの努力を救うことを願っています！

32
WickyNilliams

私はそのような問題を抱えています。これが私の解決策です。

//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);
1
Ihor Pavlyk