web-dev-qa-db-ja.com

ES6モジュールでグローバル変数を定義する正しい方法は何ですか？

ES6モジュールからグローバル変数をエクスポートする方法の説明が見つからないようです。定義されているリソースはありますか？

動作すると思われる唯一の解決策は、windowのようなグローバルオブジェクトを参照することです。

window['v'] = 3;

しかし、このスクリプトがNode.jsで実行されるとどうなりますか？それから私はwindowを持っていません; globalがあります。しかし、このコードは良くありません：

var g = window || global;
g['v'] = 3;

モジュールの概念とアプリケーションでグローバルを使用しないでくださいを理解しています。ただし、コンソールでモジュールを簡単にインポートできるSystemJなどのローダーの代わりにWebpackなどのバンドラーを使用する場合は特に、コンソールでのデバッグ中にグローバル変数を使用すると便利です。

javascriptmoduleecmascript-6
26
Max Koretskyi aka Wizard

アプリケーションでグローバル値を使用できるようにする方法はいくつかあります。

ES6モジュールを使用して、モジュールからエクスポートする定数を作成できます。その後、次のように他のモジュールまたはコンポーネントからこれをインポートできます。

/* Constants.js */
export default {
    VALUE_1: 123,
    VALUE_2: "abc"
};

/* OtherModule.js */
import Constants from '../Constants';

console.log(Constants.VALUE_1);
console.log(Constants.VALUE_2);

または、一部のJSバンドルツールは、ビルド時にコンポーネントに値を渡す方法を提供します。

たとえば、Webpackを使用している場合、 DefinePlugin を使用して、コンパイル時に使用可能ないくつかの定数を設定できます。そう：

/* Webpack configuration */
const webpack = require('webpack');

/* Webpack plugins definition */
new webpack.DefinePlugin({
    'VALUE_1': 123,
    'VALUE_2': 'abc'
});

/* SomeComponent.js */
if (VALUE_1 === 123) {
    // do something
}
10
Shishir