如何在ES2015模塊中使用全局變量

我正在使用Gulp，Babelify和Browserify將ES2015編譯爲ES5。如何在ES2015模塊中使用全局變量

文件夾結構：

project 
    - js 
    - level.js 
    - main.js

如果我有如下定義的模塊：

// level.js 
var level = []; 

level[0] = { 
    name: 'level1', 
    grid: { 
     width: GRID_WIDTH, 
     height: GRID_HEIGHT 
    } 
}; 

export default level;

然後，我有我的主JavaScript文件：

// main.js 
import level from './level.js'; 

var siteGame = (function() { 
    var GRID_WIDTH = 50, 
     GRID_HEIGHT = 50; 

    console.log(level); 

}());

我怎樣才能確保GRID_WIDTH和GRID_HEIGHT在level.js中可用？

目前，我得到一個錯誤，告知該GRID_WIDTH是（從level.js）未定義

來源

2015-11-08 AnthW

簡而言之，你沒有。如果你真的想要，你可以用DefinePlugin來使用Webpack，但是更好的方法是用一種不同的方式解決這個問題，比如需要。 –

爲什麼你在'main.js'中將這些變量局部放在IIFE中？你是否打算讓它們保密，你是否打算使用多個不同的值（在多個範圍內）？ – Bergi

模塊的整個的一點是，每個人都有自己的範圍。如果要將數據「注入」模塊，可以從接受維的level.js中導出函數，構造數組/對象並將其返回，或者將維放置在其自己的模塊中，然後將其導入到level.js中

來源

2015-11-08 16:40:06

你在一個函數內部定義了這些變量 - 它們在這個函數的btackets中生存和死亡，並且你不能在它們之外的任何地方訪問它們。如果你想在全球範圍內使用這些變量，您可以 -

把它們寫在全球window對象在ES5做 - 但不是很推薦用於各種原因
創建一個模塊，導出一個包含所有想要在其中暴露的變量的對象，該模塊可以導入該模塊並獲取所需的所有變量。

我真的建議在第一個第二個選項。

來源

2015-11-10 07:12:13

把東西放在'window'上的問題並不是真正的內存管理問題，而是封裝和副作用的問題;你不能保證另一個腳本不會修改那個'window'變量，你也不能保證這個變量在你使用它的時候可用。它還會迫使你在瀏覽器中運行所有的代碼，或者通過'jsdom' /類似的方式來運行你的代碼，這會吸引現代Web應用程序，它們通常具有某種NodeJS工具。 –

如何在ES2015模塊中使用全局變量

回答

相關問題