使用 webpack 定义全局变量 [英] Define global variable with webpack

问题描述

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

Is it possible to define a global variable with webpack to result something like this:

var myvar = {};

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

All of the examples I saw were using external file require("imports?$=jquery!./file.js")

推荐答案

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

There are several way to approach globals:

1. 将变量放入模块中.

---

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

---

Webpack evaluates modules only once, so your instance remains global and carries changes through from module to module. So if you create something like a globals.js and export an object of all your globals then you can import './globals' and read/write to these globals. You can import into one module, make changes to the object from a function and import into another module and read those changes in a function. Also remember the order things happen. Webpack will first take all the imports and load them up in order starting in your entry.js. Then it will execute entry.js. So where you read/write to globals is important. Is it from the root scope of a module or in a function called later?

config.js

export default {
    FOO: 'bar'
}

somefile.js

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

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

Note: If you want the instance to be new each time, then use an ES6 class. Traditionally in JS you would capitalize classes (as opposed to the lowercase for objects) like
import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()

1. Webpack 的 ProvidePlugin

---

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

---

Here's how you can do it using Webpack's ProvidePlugin (which makes a module available as a variable in every module and only those modules where you actually use it). This is useful when you don't want to keep typing import Bar from 'foo' again and again. Or you can bring in a package like jQuery or lodash as global here (although you might take a look at Webpack's Externals).

步骤 1) 创建任何模块.例如，一组全局实用程序会很方便:

Step 1) Create any module. For example, a global set of utilities would be handy:

utils.js

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

第 2 步)为模块添加别名并添加到 ProvidePlugin:

Step 2) Alias the module and add to ProvidePlugin:

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 中使用它，请确保重新启动开发服务器.

Now just call utils.sayHello() in any js file and it should work. Make sure you restart your dev-server if you are using that with Webpack.

注意:不要忘记告诉你的 linter 关于全局，这样它就不会抱怨.例如，请参阅我的 此处为 ESLint 的答案.

1. 使用 Webpack 的 DefinePlugin

---

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

---

If you just want to use const with string values for your globals, then you can add this plugin to your list of Webpack plugins:

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");

1. 使用全局窗口对象(或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/

你会看到这通常用于 polyfills，例如:window.Promise = Bluebird

You'll see this commonly used for polyfills, for example: window.Promise = Bluebird

1. 使用dotenv
之类的包

---

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

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

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

Create a .env file in the root directory of your project. Add environment-specific variables on new lines in the form of NAME=VALUE. For example:

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

就是这样.

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

process.env now has the keys and values you defined in your .env file.

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

注意事项:

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

Notes:

Regarding Webpack's Externals, use it if you want to exclude some modules from being included in your built bundle. Webpack will make the module globally available but won't put it in your bundle. This is handy for big libraries like jQuery (because tree shaking external packages doesn't work in Webpack) where you have these loaded on your page already in separate script tags (perhaps from a CDN).

这篇关于使用 webpack 定义全局变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！