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 le fichier externe require("imports?$=jquery!./file.js")

82
demandé sur Ricky 2016-06-06 14:44:53

5 réponses

Il y a plusieurs façon d'aborder globals:

1) Mettez vos variables dans un module.

Webpack n'évalue les modules qu'une seule fois, de sorte que votre instance reste globale et transporte les changements de module en module. donc si vous créez quelque chose comme un globals.js et exportez un objet de tous vos globals alors vous pouvez import './globals' et lire/écrire à ces globals. Vous pouvez importer dans un module, d'apporter des modifications à l'objet d'une fonction et l'importer dans un autre module et lire ces changements dans une fonction. Rappelez-vous aussi l'ordre des choses. Webpack d'abord prendre toutes les importations et les charger dans l'ordre à partir de votre entry.js . Puis il exécutera entry.js . Donc l'endroit où vous lisez/écrivez aux globals est important. S'agit-il de la portée racine d'un module ou d'une fonction appelée plus tard?

Note : si vous voulez que l'instance soit new à chaque fois, utilisez un de la classe ES6 . Traditionnellement dans JS vous capitaliseriez des classes (par opposition à la minuscule pour les objets) comme

import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()

2) Webpack's ProvidePlugin

Voici comment vous pouvez le faire en utilisant ProvidePlugin de Webpack (qui rend un module disponible comme variable dans chaque module et seulement les modules où vous l'utilisez réellement). C'est utile quand vous ne voulez pas continuer à taper import Bar from 'foo' encore et encore. Ou vous pouvez apporter un paquet comme jQuery ou lodash comme global ici (bien que vous puissiez jeter un oeil à Webpack Externals ).

Étape 1) Créez n'importe quel module. Par exemple, un ensemble global d'utilitaires serait pratique:

utils.js

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

Etape 2) Alias le module et ajouter à 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'
    })
  ]  

}

maintenant il suffit d'appeler utils.sayHello() dans n'importe quel fichier js et cela devrait fonctionner. Assurez-vous de redémarrer votre dev-server si vous utilisez qu'avec Webpack.

Note: N'oubliez pas de parler à votre linter du global, pour qu'il ne se plaigne pas. Par exemple, voir ma réponse pour ESLint ici .

3) Utiliser DefinePlugin "1519240920 de Webpack"

si vous voulez juste utiliser const avec des valeurs de chaîne pour vos globals, alors vous pouvez ajouter ce plugin à votre liste de plugins Webpack:

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

Utiliser comme:

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

4) Utiliser l'objet global window (ou global 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/

vous verrez ceci couramment utilisé pour les polyfills, par exemple: window.Promise = Bluebird

5) Utiliser un paquet comme dotenv

(pour les projets côté serveur) le paquet dotenv prendra un fichier de configuration locale (que vous pouvez ajouter à votre .gitignore s'il y a des clés/justificatifs d'identité) et ajoute vos variables de configuration au processus de Node.env objet.

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

créez un fichier .env dans le répertoire racine de votre projet. Ajouter spécifique à l'environnement variables sur les nouvelles lignes sous la forme de NAME=VALUE . Par exemple:

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

C'est ça.

process.env a maintenant les clés et les valeurs que vous avez définies dans votre fichier .env .

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

Notes:

en ce qui concerne le Externals de Webpack , utilisez-le si vous voulez exclure certains modules de votre pack construit. Webpack va faire le module à l'échelle mondiale disponible mais ne veut pas le mettre dans votre paquet. C'est pratique pour les grandes bibliothèques comme jQuery ou Lodash (parce que le fait de secouer les paquets externes ne fonctionne pas dans Webpack ). Ensuite, envisagez de regarder dans de Webpack "library approach (qui inclut une option pour utiliser une étiquette de script dans votre index.code html pour globals).

140
répondu prograhammer 2018-01-05 22:57:55

j'étais sur le point de poser la même question. Après avoir cherché un peu plus loin et avoir déchiffré une partie de la documentation de webpack, je pense que ce que vous voulez est le output.library et 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 de n'importe où dans vos autres scripts.

29
répondu OriolBG 2017-08-14 11:27:59

Use DefinePlugin .

la DefinePlugin vous permet de créer des constantes globales qui peuvent être configuré au moment de la compilation.

new webpack.DefinePlugin(definitions)

exemple:

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

Utilisation:

console.log(`Environment is in production: ${PRODUCTION}`);
12
répondu Ricky 2017-04-20 01:23:51

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

8
répondu imcvampire 2017-06-30 01:37:00

j'ai résolu ce problème en définissant les variables globales comme des propriétés statiques sur les classes auxquelles elles sont les plus pertinentes. En ES5 il ressemble à ceci:

var Foo = function(){...};
Foo.globalVar = {};
0
répondu pasx 2018-09-20 15:35:55