無法從其他JS文件中使用webpack從主JS文件中獲取全局變量

我正在學習Webpack並且很喜歡這個想法，但我只是沒有遇到這個問題。我有一個app.js文件，它有兩個require（./logger和./includes/functions）。在app.js看起來是這樣的：無法從其他JS文件中使用webpack從主JS文件中獲取全局變量

require('./logger'); 
require('./includes/functions'); 

document.write(welcomeTitle);

welcomeTitle是./includes/functions聲明的變量：

var welcomeTitle = "Hello World!";

，但我得到以下錯誤，當我運行此：bundle.js:50 Uncaught ReferenceError: welcomeTitle is not defined(…)。到welcomeTitle變量bundle.js文件引用之前它的需要：

/* 0 */ 
/***/ function(module, exports, __webpack_require__) { 

    __webpack_require__(1); 
    __webpack_require__(2); 

    document.write(welcomeTitle); 

/***/ }, 
/* 1 */ 
/***/ function(module, exports) { 

    console.log('logger.js is now loaded...'); 

/***/ }, 
/* 2 */ 
/***/ function(module, exports) { 

    var welcomeTitle = "Hello World!";

爲什麼我不能訪問welcomeTitle變量如果我需要functions.js，在這個變量聲明？

來源

2016-11-28 erol_smsr

你'var' welcomeTitle需要導出，以便它的訪問。你看這裏http://requirejs.org？ –

沒有要求JS沒辦法嗎？「require」的要點是從文件中獲取函數/方法和變量等嗎？有沒有更簡單的方法來實現這一目標？ –

這很簡單 - 在somefile.js中，函數someFn（）{} module.exports = someFn'然後在main.js中var someFn = require（'./ somefile'）;'你可以*使它成爲一個全局的'var''window.welcomeTitle ='something';'但是如果你使用'require'則要保持一致並堅持這種範式。 –

將module.exports添加到函數文件./includes/functions.js的底部，並將welcomeTitle設置爲出口屬性。

然後，你要訪問welcomeTitle在做這樣的文件：

var functions = require('./includes/functions'); 
var welcomeTitle = functions.welcomeTitle;

來源

2016-11-29 00:34:31

太棒了！但是，我必須爲每個要在主JS文件中訪問的函數和變量執行module.exports嗎？沒有辦法只是出口他們所有的人？ –

是的，你可以導出一個像'module.exports = someFn'這樣的函數，但是如果你想導出多個'vars'，'functions'等，那麼'module.exports = {someVar：1，someOtherFn：function（）{} }'......可能有更好的方法我不知道，但是，最好只導出需要訪問的內容。 –

真棒謝謝你！ –

無法從其他JS文件中使用webpack從主JS文件中獲取全局變量

回答

相關問題