☰

Node.js と ES6 における module.exports と export default の違い 質問する

tag-icon • tag-icon node.js module ecmascript-6
Node.js と ES6 における module.exports と export default の違い 質問する

Nodemodule.exportsと ES6 の違いは何ですか? Node.js 6.2.2 でexport default実行しようとすると、「__ はコンストラクターではありません」というエラーが発生する理由を解明しようとしています。export default

何が効果的か

'use strict'
class SlimShady {
  constructor(options) {
    this._options = options
  }

  sayName() {
    return 'My name is Slim Shady.'
  }
}

// This works
module.exports = SlimShady

何が機能しないのか

'use strict'
class SlimShady {
  constructor(options) {
    this._options = options
  }

  sayName() {
    return 'My name is Slim Shady.'
  }
}

// This will cause the "SlimShady is not a constructor" error
// if in another file I try `let marshall = new SlimShady()`
export default SlimShady

ベストアンサー1

問題は

  • CommonJS で ES6 モジュールをエミュレートする方法
  • モジュールをインポートする方法

ES6 から CommonJS へ

これを書いている時点では、ES6 モジュールをネイティブにサポートする環境はありません。Node.js でそれらを使用する場合は、Babel などを使用してモジュールを CommonJS に変換する必要があります。しかし、それはどのように行われるのでしょうか?

多くの人は、module.exports = ...は と同等でありexport default ...、exports.foo ...は と同等であると考えていますexport const foo = ...。しかし、これは必ずしも正しくありません。少なくとも、Babel ではそうではありません。

ES6defaultエクスポートは実際には名前付きエクスポートでもありますが、default名前が「予約済み」であり、特別な構文サポートがあります。Babel が名前付きエクスポートとデフォルトエクスポートをどのようにコンパイルするかを見てみましょう。

// input
export const foo = 42;
export default 21;

// output
"use strict";

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

exportsここで、 と同様に、デフォルトのエクスポートがオブジェクトのプロパティになることがわかりますfoo。

モジュールをインポートする

モジュールをインポートするには、CommonJS を使用するか、ES6import構文を使用するかの 2 つの方法があります。

あなたの問題:次のようなことをしていると思います:

var bar = require('./input');
new bar();

デフォルトのエクスポートの値が割り当てられると予想されますbar。ただし、上記の例でわかるように、デフォルトのエクスポートがdefaultプロパティに割り当てられています。

デフォルトのエクスポートにアクセスするには、実際に

var bar = require('./input').default;

ES6モジュール構文を使用する場合、つまり

import bar from './input';
console.log(bar);

バベルはそれを

'use strict';

var _input = require('./input');

var _input2 = _interopRequireDefault(_input);

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

console.log(_input2.default);

barへのすべてのアクセスが へのアクセスに変換されることがわかります.default。

おすすめ記事