Definisci la variabile globale con il webpack

È ansible definire una variabile globale con webpack per ottenere qualcosa del genere:

var myvar = {}; 

Tutti gli esempi che ho visto utilizzavano il file esterno require("imports?$=jquery!./file.js")

Ci sono diversi modi per affrontare i globali:

1) Metti le tue variabili in un modulo.

Webpack valuta i moduli una sola volta, quindi la tua istanza rimane globale e trasporta le modifiche da un modulo all’altro. Quindi, se crei qualcosa come globals.js ed esporti un object di tutti i tuoi globali, puoi import './globals' e leggere / scrivere su questi globals. È ansible importare in un modulo, apportare modifiche all’object da una funzione e importarlo in un altro modulo e leggere tali modifiche in una funzione. Ricorda anche che le cose accadono. Webpack prenderà prima tutte le importazioni e le caricherà in ordine a partire dal tuo entry.js . Quindi eseguirà entry.js . Quindi, dove leggi / scrivi a livello globale è importante. Proviene dall’ambito di base di un modulo o in una funzione chiamata in seguito?

Nota : se si desidera che l’istanza sia new ogni volta, quindi utilizzare una class ES6 . Tradizionalmente in JS si possono utilizzare le classi maiuscole (al contrario di quelle minuscole per oggetti)
import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()

2) ProvidePlugin di Webpack

Ecco come puoi farlo usando ProvidePlugin di Webpack (che rende un modulo disponibile come variabile in ogni modulo e solo quei moduli in cui lo usi effettivamente). Questo è utile quando non si vuole continuare a digitare import Bar from 'foo' ancora e ancora. Oppure puoi portare qui un pacchetto come jQuery o lodash come globale (anche se potresti dare un'occhiata a Externals di Webpack).

Passaggio 1) Crea qualsiasi modulo. Ad esempio, un insieme globale di utilità sarebbe utile:

utils.js

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

Passaggio 2) Alias ​​del modulo e aggiungi 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' }) ] } 

Ora chiama utils.sayHello() in qualsiasi file js e dovrebbe funzionare. Assicurati di riavviare il tuo dev-server se lo stai usando con Webpack.

Nota: non dimenticare di dire al tuo linter circa il globale, quindi non si lamenterà. Ad esempio, vedi la mia risposta per ESLint qui .

3) Utilizzare DefinePlugin di Webpack

Se si desidera utilizzare const con valori stringa per i globals, è ansible aggiungere questo plug-in al proprio elenco di plug-in Webpack:

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

Usalo come:

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

4) Usa l'object della finestra globale (o globale del nodo)

 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/ 

Vedrai questo comunemente usato per i polyfill, ad esempio: window.Promise = Bluebird

5) Usa un pacchetto come dotenv

(Per i progetti lato server) Il pacchetto dotenv utilizza un file di configurazione locale (che è ansible aggiungere a .gitignore se sono presenti chiavi / credenziali) e aggiunge le variabili di configurazione all'object process.env del nodo.

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

Crea un file .env nella directory principale del tuo progetto. Aggiungi variabili specifiche per l'ambiente su nuove righe sotto forma di NAME=VALUE . Per esempio:

 DB_HOST=localhost DB_USER=root DB_PASS=s1mpl3 

Questo è tutto.

process.env ora ha le chiavi e i valori che hai definito nel tuo file .env .

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

Gli appunti:

Per quanto riguarda gli esterni di Webpack, utilizzalo se desideri escludere alcuni moduli dall'essere inclusi nel pacchetto creato. Webpack renderà il modulo disponibile a livello globale ma non lo metterà nel tuo pacchetto. Questo è utile per grandi librerie come jQuery o Lodash (perché i pacchetti esterni di shaking dell'albero non funzionano in Webpack ). Quindi prendi in considerazione l' approccio alla libreria di Webpack (che include un'opzione per utilizzare un tag script nel tuo index.html per i globals).

Stavo per fare la stessa domanda. Dopo aver cercato un po ‘di più e aver decifrato parte della documentazione di webpack, penso che quello che vuoi sia l’ output.library e output.libraryTarget nel file webpack.config.js .

Per esempio:

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

Ora se colleghi il file www/js/index.js generato in un tag di script html puoi accedere a myLibrary.foo da qualsiasi altro punto degli altri tuoi script.

Usa DefinePlugin .

DefinePlugin consente di creare costanti globali che possono essere configurate in fase di compilazione.

 new webpack.DefinePlugin(definitions) 

Esempio:

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

Uso:

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

È ansible utilizzare define window.myvar = {} . Quando vuoi usarlo, puoi usare come window.myvar = 1