使用 webpack 定义全局变量

Question

是否可以使用 webpack 定义一个全局变量来产生这样的结果：

var myvar = {};

我看到的所有示例都使用外部文件require("imports?$=jquery!./file.js")

Answer 1

有几种方法可以处理全局变量：

<小时 />

1.将变量放在模块中。

Webpack 仅评估一次模块，因此您的实例保持全局状态，并在模块之间进行更改。因此，如果您创建类似globals.js并导出所有全局变量的对象，则可以import './globals'并读取/写入这些全局变量。您可以导入到一个模块中，从一个函数对对象进行更改，然后导入到另一个模块中并在函数中读取这些更改。还要记住事情发生的顺序。Webpack 将首先获取所有导入并从您的entry.js开始按顺序加载它们。然后它将执行entry.js.因此，读取/写入全局变量的位置很重要。它是来自模块的根范围还是在稍后调用的函数中？

配置.js

export default {
FOO: 'bar'
}

某文件.js

import CONFIG from './config.js'
console.log(`FOO: ${CONFIG.FOO}`)

注意：如果您希望每次都new实例，请使用 ES6 类。 传统上，在JS中，您会将类大写(而不是对象的小写)，例如
import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()

<小时 />

2。使用 Webpack 的 ProvidePlugin。

以下是使用 Webpack 的 ProvidePlugin 的方法(它使模块在每个模块中都作为变量提供，并且仅在您实际使用它的模块中可用)。当您不想一次又一次地键入import Bar from 'foo'时，这很有用。或者你可以在这里引入一个像jQuery或lodash这样的包作为全局包(尽管你可以看看Webpack的外部)。

第 1 步。创建任何模块。例如，一组全局实用程序将很方便：

实用工具.js

export function sayHello () {
console.log('hello')
}

第 2 步。别名模块并添加到提供插件：

webpack.config.js

var webpack = require("webpack");
var path = require("path");
// ...
module.exports = {
// ...
resolve: {
extensions: ['', '.js'],
alias: {
'utils': path.resolve(__dirname, './utils')  // <-- When you build or restart dev-server, you'll get an error if the path to your utils.js file is incorrect.
}
},
plugins: [
// ...
new webpack.ProvidePlugin({
'utils': 'utils'
})
]  
}

现在只需在任何 js 文件中调用utils.sayHello()，它应该可以工作。如果您将其与 Webpack 一起使用，请确保重新启动开发服务器。

注意：不要忘记告诉您的 linter 有关全球的信息，这样它就不会抱怨。例如，请参阅我对 ESLint 的回答 这里.

<小时 />

3.使用 Webpack 的 DefinePlugin。

如果您只想将 const 与全局变量的字符串值一起使用，那么您可以将此插件添加到您的 Webpack 插件列表中：

new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})

像这样使用它：

console.log("Running App version " + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");

<小时 />

4。使用全局窗口对象(或 Node 的全局)。

window.foo = 'bar'  // For SPA's, browser environment.
global.foo = 'bar'  // Webpack will automatically convert this to window if your project is targeted for web (default), read more here: https://webpack.js.org/configuration/node/

您将看到这通常用于填充物，例如：window.Promise = Bluebird

<小时 />

5。使用像dotenv这样的软件包。

(对于服务器端项目)dotenv 包将采用一个本地配置文件(如果有任何密钥/凭据，您可以将其添加到 .gitignore 中)，并将您的配置变量添加到 Node 的 process.env 对象中。

// As early as possible in your application, require and configure dotenv.    
require('dotenv').config()

在项目的根目录中创建一个.env文件。以NAME=VALUE的形式在新行上添加特定于环境的变量。例如：

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

就是这样。

process.env现在具有您在.env文件中定义的键和值。

var db = require('db')
db.connect({
host: process.env.DB_HOST,
username: process.env.DB_USER,
password: process.env.DB_PASS
})

<小时 />

注释

关于 Webpack 的外部组件，如果您想将某些模块排除在构建的捆绑包中，请使用它。Webpack 将使该模块全局可用，但不会将其放在您的捆绑包中。这对于像jQuery这样的大型库来说很方便(因为树摇动外部包在Webpack中不起作用)，在这些库中，你已经将这些加载到你的页面上，已经以单独的脚本标签(可能来自CDN)加载

。

Answer 2

我正要问同样的问题。在进一步搜索并解密 webpack 文档的一部分后，我认为您想要的是webpack.config.js文件中的output.library和output.libraryTarget。

例如：

js/index.js：

var foo = 3;
var bar = true;

webpack.config.js

module.exports = {
...
entry: './js/index.js',
output: {
path: './www/js/',
filename: 'index.js',
library: 'myLibrary',
libraryTarget: 'var'
...
}

现在，如果您在 html 脚本标记中链接生成的www/js/index.js文件，则可以从其他脚本中的任何位置访问myLibrary.foo。

Answer 3

使用DefinePlugin。

定义插件允许您创建全局常量，这些常量可以是 在编译时配置。

new webpack.DefinePlugin(definitions)

例：

plugins: [
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true)
})
//...
]

用法：

console.log(`Environment is in production: ${PRODUCTION}`);

Answer 4

您可以使用定义window.myvar = {}。 当你想使用它时，你可以像window.myvar = 1一样使用

Answer 5

DefinePlugin实际上并没有定义任何东西。它的作用是替换捆绑代码中存在的变量。如果代码中不存在该变量，则它不会执行任何操作。因此，它不会创建全局变量。

要创建全局变量，请将其写入代码中：

window.MyGlobal = MY_GLOBAL; 

并使用DefinePlugin将MY_GLOBAL替换为一些代码：

new webpack.DefinePlugin({
'MY_GLOBAL': `'foo'`,
// or
'MY_GLOBAL': `Math.random()`,
}),

那么你的输出JS将是这样的：

window.MyGlobal = 'foo';
// or
window.MyGlobal = Math.random(); 

但是MY_GLOBAL在运行时永远不会真正存在，因为它永远不会被定义。所以这就是为什么DefinePlugin有一个误导性的名字。

Answer 6

在某些旧项目中尝试捆绑<脚本>标记 js 文件时，您可能会遇到此问题。 不要为此使用 webpack，如果加入 50+ 个库(如 jquery)，然后找出所有全局变量，或者它们使用嵌套 require，甚至可能是不可能的。我建议简单地使用 uglify js 代替，这会在 2 个命令中消除所有这些问题。

npm install uglify-js -g
uglifyjs --compress --mangle --output bundle.js -- js/jquery.js js/silly.js

Answer 7

我通过将全局变量设置为与它们最相关的类的静态属性来解决此问题。在 ES5 中，它看起来像这样：

var Foo = function(){...};
Foo.globalVar = {};