我是 Webpack 3 的新手，我想将我的 var 分享到其他 JS 文件如何？

Question

这是我的Webpack 3配置：

const webpack = require('webpack'); //to access built-in plugins
const glob = require('glob');
const path = require('path');
/*
* Frontend Config
*/
const _myPathFront = './assets/my_lib/js/frontend/';
const _myFrontEnd = {
entry: glob.sync(_myPathFront + '*.js'),
output: {
filename: '_my_main_style.js',
path: path.resolve(__dirname, 'assets/my_lib/js')
},
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
};

module.exports = [
Object.assign({} , _myFrontEnd)
];

我有一个变量要共享到Frontend文件夹中的另一个js文件：

var windowHieght = 0 < window.innerHeight ? window.innerHeight : screen.Height;

如何将share配置中的这个变量设置为其他js文件？

Answer 1

您不需要对配置进行任何更改，也不希望在配置中设置此变量，因为在构建时用户浏览器窗口或屏幕的大小是未知的。要在文件之间共享变量，只需使用import和export语句。您可以从将在浏览器中运行的模块导出此变量：

src/windowHeight.js

export default 0 < window.innerHeight ? window.innerHeight : screen.Height;

然后将其导入另一个模块：

src/someOtherModule.js

import windowHeight from './windowHeight.js';

然后从另一个模块导入：

src/subfolder/anotherModule.js

import windowHeight from '../windowHeight.js';

Webpack会自动使其工作。windowHeight.js甚至不需要在webpack配置的entry部分中；如果entry中的某个模块导入它，或者导入另一个导入它的模块，则webpack将自动包含它。

此外，我不知道为什么要使用glob.sync来构建一个文件列表，将其放入entry中，但这是非典型的，可能没有必要。您可能只需要在entry中放入一个文件，并从其他文件中获得该文件import。

警告

如果用户调整浏览器的大小，window.innerHeight可能会发生更改。如果他们的窗户开始很小，那么无论你想用窗户的高度做什么，它都可能会搞砸。您应该监听窗口大小调整事件，并对其做出响应：

function handleResize() {
// do something with window.innerHeight
}
window.addEventListener('resize', handleResize);