Definir variable global con webpack

¿Es posible definir una variable global con webpack para obtener algo como esto:

var myvar = {};

Todos los ejemplos que vi estaban usando un archivo externo require("imports?$=jquery!./file.js")

Hay varias formas de acercarse a los globales:

1) Pon tus variables en un módulo.

Webpack evalúa los módulos solo una vez, por lo que su instancia permanece global y lleva los cambios de un módulo a otro. Entonces, si crea algo como a globals.jsy exporta un objeto de todas sus globales, puede import './globals'leer y escribir en estas globales. Puede importar en un módulo, realizar cambios en el objeto desde una función e importar en otro módulo y leer esos cambios en una función. También recuerda el orden en que suceden las cosas. Webpack primero tomará todas las importaciones y las cargará en orden comenzando en su entry.js. Entonces se ejecutará entry.js. Entonces, donde lees / escribes a los globales es importante ¿Es del alcance raíz de un módulo o en una función llamada más tarde?

Nota : Si desea que la instancia sea newcada vez, use una clase ES6 . Tradicionalmente, en JS, se capitalizaban las clases (en lugar de las minúsculas para los objetos) como
import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()

2) ProvidePlugin de Webpack

A continuación, le mostramos cómo puede hacerlo utilizando ProvidePlugin de Webpack (que hace que un módulo esté disponible como variable en cada módulo y solo en aquellos módulos donde realmente lo usa). Esto es útil cuando no desea seguir escribiendo import Bar from 'foo'una y otra vez. O puede traer un paquete como jQuery o lodash como global aquí (aunque puede echar un vistazo a los elementos externos de Webpack ).

Paso 1) Crea cualquier módulo. Por ejemplo, un conjunto global de utilidades sería útil:

utils.js

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

Paso 2) Alias ​​el módulo y agregar a 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'
    })
  ]  

}

Ahora solo llame utils.sayHello()a cualquier archivo js y debería funcionar. Asegúrese de reiniciar su servidor de desarrollo si lo está usando con Webpack.

Nota: No olvides decirle a tu linter sobre lo global, para que no se queje. Por ejemplo, vea mi respuesta para ESLint aquí .

3) Use el DefinePlugin de Webpack

Si solo desea usar const con valores de cadena para sus globales, entonces puede agregar este complemento a su lista de complementos de Webpack:

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

Úselo como:

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

4) Use el objeto de ventana global (o el Nodo global)

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/

Verá esto comúnmente utilizado para polyfills, por ejemplo: window.Promise = Bluebird

5) Use un paquete como dotenv

(Para proyectos del lado del servidor) El paquete dotenv tomará un archivo de configuración local (que podría agregar a su .gitignore si hay claves / credenciales) y agregará sus variables de configuración al objeto process.env de Node .

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

Cree un .envarchivo en el directorio raíz de su proyecto. Agregue variables específicas del entorno en nuevas líneas en forma de NAME=VALUE. Por ejemplo:

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

Eso es.

process.envahora tiene las claves y los valores que definió en su .envarchivo.

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

Notas:

Con respecto a los elementos externos de Webpack, úselo si desea excluir algunos módulos de su paquete integrado. Webpack hará que el módulo esté disponible globalmente, pero no lo incluirá en su paquete. Esto es útil para grandes bibliotecas como jQuery (porque los paquetes externos de sacudidas de árboles no funcionan en Webpack ) donde ya los ha cargado en su página en etiquetas de script separadas (tal vez de un CDN).

Estaba a punto de hacer la misma pregunta. Después de buscar un poco más y descifrar parte de la documentación del paquete web, creo que lo que quieres es el output.libraryy output.libraryTargeten el webpack.config.jsarchivo.

Por ejemplo:

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'
   ...
}

Ahora, si vincula el www/js/index.jsarchivo generado en una etiqueta de script html, puede acceder myLibrary.foodesde cualquier otro lugar en sus otros scripts.

Use DefinePlugin .

DefinePlugin le permite crear constantes globales que se pueden configurar en tiempo de compilación.

new webpack.DefinePlugin(definitions)

Ejemplo:

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

Uso:

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

Puedes usar define window.myvar = {}. Cuando quieras usarlo, puedes usar comowindow.myvar = 1

Resolví este problema estableciendo las variables globales como propiedades estáticas en las clases para las que son más relevantes. En ES5 se ve así:

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