javascript - Definirea unei variabile globale cu webpack

Este posibil să definiți o variabilă globală cu webpack pentru a obține ceva de genul acesta:

var myvar = {};

Toate exemplele pe care le-am văzut foloseau un fișier extern require("imports?$=jquery!./file.js")

Răspuns #1

Există mai multe moduri de a aborda globalele:

1. Puneți variabilele în un modul.

Webpack evaluează modulele o singură dată, astfel încât instanța ta rămâne globală și transmite modificările de la un modul la altul. Așa că, dacă creezi ceva de genul unui globals.js și exporți un obiect cu toate variabilele tale globale, atunci poți import './globals' și să citești/scrii în aceste variabile globale. Poți importa într-un modul, să faci modificări în obiect dintr-o funcție și să imporți într-un alt modul pentru a citi acele modificări într-o funcție. De asemenea, amintește-ți de ordinea în care se întâmplă lucrurile. Webpack va lua mai întâi toate importurile și le va încărca în ordinea pornind din entry.js. Apoi va executa entry.js. Deci, locul unde citești/scrii în variabilele globale este important. Este din domeniul rădăcină al unui modul sau într-o funcție apelată mai târziu?

config.js

export default {
    FOO: 'bar'
}

somefile.js

import CONFIG from './config.js'
console.log(`FOO: ${CONFIG.FOO}`)

Notă: Dacă doriți ca instanța să fie nouă de fiecare dată, atunci folosiți o clasă ES6. În mod tradițional în JS, ați capitaliza clasele (spre deosebire de literele mici pentru obiecte) precum
import FooBar from './foo-bar'/<-- Utilizare: myFooBar=new FooBar()

2. Folosește ProvidePlugin-ul din Webpack.

Iată cum poți face acest lucru folosind ProvidePlugin din Webpack (care face un modul disponibil ca o variabilă în fiecare modul și doar în acele module unde îl folosești efectiv). Acest lucru este util atunci când nu vrei să tot tastezi import Bar from 'foo' iar și iar. Sau poți aduce un pachet precum jQuery sau lodash ca global aici (deși ar fi bine să arunci o privire la Externals din Webpack).

Pasul 1. Creează orice modul. De exemplu, un set global de utilitare ar fi util:

utils.js

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

Pasul 2. Creează un alias pentru modul și adaugă-l în 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'
    })
  ]  

}

Acum, pur și simplu apelează utils.sayHello() în orice fișier js și ar trebui să funcționeze. Asigură-te că repornești serverul de dezvoltare dacă îl folosești cu Webpack.

Notă: Nu uita să-i spui linterului despre global, ca să nu se plângă. De exemplu, vezi răspunsul meu pentru ESLint aici.

3. Folosește DefinePlugin-ul din Webpack.

Dacă vrei doar să folosești const cu valori de tip string pentru variabilele tale globale, atunci poți adăuga acest plugin la lista ta de pluginuri Webpack:

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

Folosește-l astfel:

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

4. Folosește obiectul global window (sau global al 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/

Veți vedea acest lucru folosit frecvent pentru polyfill-uri, de exemplu: window.Promise=Bluebird

5. Folosește un pachet precum dotenv.

(Pentru proiecte pe partea de server) Pachetul dotenv va prelua un fișier de configurare local (pe care îl puteți adăuga în .gitignore dacă există chei/credendiale) și adaugă variabilele de configurare în obiectul process.env al Node.

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

Creează un fișier .env în directorul rădăcină al proiectului tău. Adaugă variabile specifice mediului pe linii noi în forma NAME=VALUE. De exemplu:

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

Asta e tot.

process.env are acum cheile și valorile pe care le-ai definit în fișierul tău .env.

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

Note

Referitor la externele din Webpack, folosește-le dacă vrei să excluzi anumite module din a fi incluse în pachetul tău construit. Webpack va face modulul disponibil global, dar nu îl va introduce în pachetul tău. Acest lucru este util pentru biblioteci mari precum jQuery (deoarece tree shaking-ul pentru pachete externe nu funcționează în Webpack), unde ai deja aceste biblioteci încărcate pe pagina ta în taguri script separate (poate de pe un CDN).

Răspunsul #2

Eram pe cale să pun exact aceeași întrebare. După ce am căutat puțin mai mult și am descifrat o parte din documentația webpack, cred că ceea ce vrei este output.library și output.libraryTarget în fișierul webpack.config.js.

De exemplu:

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

Acum, dacă legi fișierul generat www/js/index.js într-un tag script HTML, poți accesa myLibrary.foo din orice alt script al tău.

Răspunsul #3

Folosește DefinePlugin.

DefinePlugin îți permite să creezi constante globale care pot fi configurate în timpul compilării.

new webpack.DefinePlugin(definitions)

Exemplu :

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

Utilizare :

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

Răspunsul #4

Poți folosi definirea window.myvar={}. Când vrei să o folosești, poți să o folosești astfel: window.myvar=1