1. ホーム
  2. javascript

[解決済み] Babel 6.xでデフォルトのエクスポート値をrequire()できない。

2023-02-17 11:43:44

質問

Babel 5.xでは、以下のようなコードを書くことができます。

app.js

export default function (){}

index.js

require('babel/register');
require('./app')();

次に node index.js をエラーなしで実行できます。しかし、Babel 6.xを使用して、次のコードを実行します。

index.es6.js

require('babel-core/register');
require('./app')();

はエラーになります

require(...) は関数ではありません。

理由を知りたいのですが?

どのように解決するのですか?

TL;DR

を使う必要があります。

const app = require('./app').default;
app();

説明

Babel 5 では、以前は互換性を保つために export default もしモジュールがひとつのエクスポートだけを含み、それがデフォルトのエクスポートであった場合、そのモジュールは module.exports . ですから、例えば、あなたのモジュール app.js

export default function () {}

は次のように変換されます。

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports["default"] = function () {};

module.exports = exports["default"];

これは 純粋に との互換性のために行われました。 require との互換性のために、純粋に - Babel-transpiled モジュール (あなたがしているように) を使用します。また、モジュールに名前付きエクスポートとデフォルトエクスポートの両方が含まれている場合、一貫性がありません。 require -d.

実際には、ES6モジュール仕様によると、デフォルトのエクスポートは と同じです。 という名前のエクスポートと default . これは、コンパイル時に静的に解決できる単なる構文上の糖分です。

import something from './app';

はこれと同じ

import { default as something } from './app';

とはいえ、Babel 6 はモジュールをトランスパイルする際の相互運用性のハックをやめることにしたようです。現在、あなたのモジュール app.js は次のようにトランスパイルされます。

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

exports.default = function () {};

ご覧のように、もう module.exports . への require このモジュールでは

const app = require('./app').default;
app();

あるいは、もっと簡潔で、元のコードに近いものです。

require('./app').default();