インポートされたソースでグローバルが定義されていませんが、必要なソースで動作しています

Question

ありがとうございました！私はここ数日、SO、GH、そしてそれ以外のところでこの問題に関するすべてのリードについて考えることができました。それが、実際問題であると願っています。

global.val = 'some-value'; 

// 1) Global variables work just fine when the source is require'd 
require('./second'); 

// 2) Global variables don't seem to be available when the source is imported 
// Results in: ReferenceError: val is not defined 
import './second'; 

そして、私の第2のソースファイルは、単にその値をログに記録されています：

console.log(val); 

second.jsがvalが定義されていない、インポートされた場合

は私のWebPACKのエントリソースを考えます。必要な場合は、valは 'some-value'に設定されています。私はこの動作の説明を見つけることができませんでした。

webpack.config.js：

const webpack = require('webpack'); 

module.exports = { 
    output: { 
    filename: 'main.js', 
    publicPath: '/' 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 

     query: { 
     presets: ['es2015','react'] 
     } 
    }] 
    }, 
    devtool: 'source-map' 
}; 

バージョン：

• のWebPACK：1.12.9
• バベル：6.0.0

私はバベルサーバ - を通じて正確に同じコードを実行します私はWebpackとそれを介してクライアント側を実行すると、私はこれで終わるssue。私は数日間、この1つを自分自身で蹴ってきました。あなたが提供できる援助に感謝しますか？あなたが何か情報をもっと必要としたら教えてください！

ありがとうございます！

Answer 1

これは予想される動作で、私はBabelが同じことをすると思います。モジュールの本体が実行される前にimportステートメントは処理されているので、あなたが本当にこれをやってみたかった場合

global.val = 'some-value'; 
import './second'; 

はあなたにグローバル割り当てを移動する必要があると思い、同じよう

import './second'; 
global.val = 'some-value'; 

を動作しますそれ自身のモジュール、例えば

import './initialize-globals'; 
import './second';