Définir une variable globale avec webpack

Question

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

Tous les exemples que j’ai vu ont été à l’aide de fichier externe``

Answer 1

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

1) Mettre les variables dans un module.

Webpack évalue les modules qu'une seule fois, de sorte que votre instance demeure mondiale et comporte des modifications par le biais d'un module à l'autre. Donc, si vous créez quelque chose comme un globals.js et exporter un objet de tous vos globals vous pouvez alors import './globals' et de lecture/écriture de ces variables globales. Vous pouvez importer dans un module, d'apporter des modifications à l'objet à partir d'une fonction et de les importer dans un autre module et de 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 va exécuter entry.js. Donc où vous en lecture/écriture aux variables globales est important. C'est à partir de la racine de la portée d'un module ou une fonction appelée plus tard?

Remarque: Si vous souhaitez que l'instance soit new à chaque fois, puis utiliser une ES6 classe. Traditionnellement en JS vous permettrait de tirer profit des classes (par opposition aux minuscules pour les objets) comme
import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()

2) Webpack est ProvidePlugin

Voici comment vous pouvez le faire en utilisant Webpack est ProvidePlugin (qui fait un module disponible en tant que variable dans chaque module et seuls les modules où vous comptez l'utiliser). Ceci est utile lorsque vous ne souhaitez pas garder en tapant import Bar from 'foo' , encore et encore. Ou vous pouvez apporter un paquet comme jQuery ou lodash mondiale ici (bien que vous pouvez prendre un coup d'oeil à Webpack de l' Alias).

Étape 1) Créer un module. Par exemple, un ensemble global de services publics, ce serait pratique:

utils.js

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

Étape 2) Alias le module et l'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, juste appelez - utils.sayHello() dans tous les fichier js et cela devrait fonctionner. Assurez-vous de redémarrer votre dev-server si vous utilisez qu'avec Webpack.

Remarque: N'oubliez pas de dire à votre linter sur le global, afin de ne pas se plaindre. Par exemple, voir ma réponse pour ESLint ici.

3) Utiliser Webpack est DefinePlugin

Si vous voulez juste utiliser const avec les valeurs de chaîne pour votre globals, vous pouvez ajouter ce plugin à votre liste de 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")
})

Utiliser comme:

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

4) Utilisez la fenêtre globale de l'objet (ou du Nœud 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/

Vous verrez c'est souvent utilisée pour les polyfills, par exemple: window.Promise = Bluebird

5) Utiliser un programme comme dotenv

(Pour les projets côté serveur) Le dotenv paquet sera de prendre un fichier de configuration local (que vous pouvez ajouter à votre .gitignore s'il y a des clés et des informations d'identification) et ajoute votre configuration des variables de Nœud de processus.env objet.

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

Créer un .env le fichier dans le répertoire racine de votre projet. Ajouter spécifiques à l'environnement des variables sur les nouvelles lignes dans le formulaire d' NAME=VALUE. Par exemple:

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

C'est tout.

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

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

Notes:

Concernant Webpack est que d'apparence, de l'utiliser si vous souhaitez exclure certains modules de cours inclus dans votre construit ensemble. Webpack fera le module disponible dans le monde entier, mais ne le mettez pas dans votre bundle. C'est pratique pour les grandes librairies comme jQuery ou Lodash (parce que l'arbre secouant paquets externes ne fonctionne pas dans Webpack). Ensuite, envisager la recherche dans Webpack de l' approche de bibliothèque (qui inclut une option pour utiliser une balise script dans votre index.html pour les variables globales).

Answer 2

J'allais poser la même question. Après une recherche un peu plus loin et decyphering partie de webpack de la documentation, je pense que ce que vous voulez, c'est l' output.library et output.libraryTarget dans la webpack.config.js le fichier.

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 générés www/js/index.js le fichier dans un script html de la balise, vous pouvez accéder à l' myLibrary.foo à partir de n'importe où dans d'autres scripts.

Answer 3

Utiliser DefinePlugin.

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

Exemple :

Utilisation :

Answer 4

Vous pouvez utiliser définir . Lorsque vous souhaitez l’utiliser, vous pouvez utiliser comme

Answer 5

J’ai résolu ce problème en définissant les variables globales comme des propriétés statiques sur des classes dont ils sont les plus pertinents. Dans l’ES5, il ressemble à ceci :