[解決済み] Babel 6.xでデフォルトのエクスポート値をrequire()できない。
質問
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();
関連
-
[解決済み] JavaScript で配列に値が含まれているかどうかを確認するにはどうすればよいですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] Babel 6 regeneratorRuntimeが定義されていません。
-
[解決済み] JavaScriptの "export default "とは何ですか?
-
[解決済み] JavaScriptの "require "とは何ですか?
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
-
[解決済み】JavaScriptの関数にデフォルトのパラメータ値を設定する
-
[解決済み】Node.jsのrequireとES6のimport/exportを使い分ける。
-
[解決済み] Javascript 空の配列の削減
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Node.jsとES6におけるmodule.exportsとexport defaultの比較
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] JavaScript で範囲を作成する - 奇妙な構文
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] moment.jsでミュータビリティを回避するには?
-
[解決済み] jQueryで入力ファイルが空かどうかをチェックする方法
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ