Définir une variable globale avec webpack

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).