問題は
- CommonJSでES6モジュールをエミュレートする方法
- モジュールのインポート方法
ES6からCommonJS
これを書いている時点では、ES6モジュールをネイティブにサポートしている環境はありません。Node.jsで使用する場合は、Babelなどを使用してモジュールをCommonJSに変換する必要があります。しかし、それはどのように正確に起こりますか?
多くの人が考えるmodule.exports = ...
に相当するとexport default ...
とexports.foo ...
に相当しますexport const foo = ...
。しかし、それは真実ではなく、少なくともバベルのやり方ではありません。
ES6 default
エクスポートは実際にはエクスポートとも呼ばれますが、これ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
。
モジュールをインポートする
モジュールは2つの方法でインポートできimport
ます。CommonJSを使用するか、ES6 構文を使用します。
あなたの問題:あなたは次のようなことをしていると思います:
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);
へのすべてのアクセスがaccessにbar
変換されていることがわかります.default
。