web-dev-qa-db-fra.com

Définir une variable globale avec webpack

Est-il possible de définir une variable globale avec webpack pour obtenir quelque chose comme ceci:

var myvar = {};

Tous les exemples que j'ai vus utilisaient un fichier externe require("imports?$=jquery!./file.js")

javascriptwebpackwebpack-2webpack-3
93
Teneff

J'étais sur le point de poser la même question. Après avoir cherché un peu plus loin et déchiffré une partie de la documentation de webpack, je pense que ce que vous voulez, c'est le output.library et le output.libraryTarget dans le fichier webpack.config.js.

Par exemple:

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

Maintenant, si vous liez le fichier www/js/index.js généré dans une balise de script html, vous pouvez accéder à myLibrary.foo à partir de n’importe où dans vos autres scripts.

33
OriolBG

Utilisez DefinePlugin .

DefinePlugin vous permet de créer des constantes globales pouvant être configuré à la compilation.

new webpack.DefinePlugin(definitions)

Exemple:

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

Usage:

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

Vous pouvez utiliser define window.myvar = {}. Quand vous voulez l'utiliser, vous pouvez utiliser comme window.myvar = 1

8
Anh Nguyen

J'ai résolu ce problème en définissant les variables globales comme propriétés statiques sur les classes pour lesquelles elles sont les plus pertinentes. Dans ES5, cela ressemble à ceci:

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