无法从其他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文件中获取全局变量

回答

相关问题