javascript - script - webpack tutorial

Definir variable global con webpack

Question

¿Es posible definir una variable global con webpack para obtener algo como esto:

var myvar = {};

Todos los ejemplos que vi estaban usando un archivo externo require("imports?$=jquery!./file.js")

Answer 1

Estaba a punto de hacer la misma pregunta. Después de buscar un poco más y descifrar parte de la documentación de webpack, creo que lo que desea es output.library y output.libraryTarget en el archivo webpack.config.js .

Por ejemplo:

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

Ahora, si vincula el archivo www/js/index.js generado en una etiqueta de script html, puede acceder a myLibrary.foo desde cualquier otro lugar en sus otros scripts.

Answer 2

Hay varias formas de acercarse a los globales:

1) Pon tus variables en un módulo.

Webpack evalúa los módulos solo una vez, por lo que su instancia permanece global y lleva los cambios de un módulo a otro. Entonces, si crea algo como globals.js y exporta un objeto de todos sus globals, puede import ''./globals'' y leer / escribir en estos globals. Puede importar en un módulo, realizar cambios en el objeto desde una función e importar en otro módulo y leer esos cambios en una función. También recuerda el orden en que suceden las cosas. Webpack primero tomará todas las importaciones y las cargará en orden comenzando en su entry.js . Luego ejecutará entry.js . Entonces, donde lees / escribes a los globales es importante. ¿Es del alcance raíz de un módulo o en una función llamada más tarde?

Nota : Si desea que la instancia sea new cada vez, use una clase ES6 . Tradicionalmente, en JS, se capitalizaban las clases (en lugar de las minúsculas para los objetos) como
import FooBar from ''./foo-bar'' // <-- Usage: myFooBar = new FooBar()

2) ProvidePlugin de ProvidePlugin

Aquí le mostramos cómo puede hacerlo utilizando ProvidePlugin de Webpack (que hace que un módulo esté disponible como una variable en cada módulo y solo en aquellos módulos donde realmente lo usa). Esto es útil cuando no desea seguir escribiendo import Bar from ''foo'' una y otra vez. O puede traer un paquete como jQuery o lodash como global aquí (aunque puede echar un vistazo a los elementos Externals de Webpack).

Paso 1) Crea cualquier módulo. Por ejemplo, un conjunto global de utilidades sería útil:

utils.js

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

Paso 2) Alias ​​el módulo y agregar 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''
})
]
}

Ahora solo llame a utils.sayHello() en cualquier archivo js y debería funcionar. Asegúrese de reiniciar su servidor de desarrollo si lo está usando con Webpack.

Nota: No olvides decirle a tu linter sobre lo global, para que no se queje. Por ejemplo, vea mi respuesta para ESLint aquí .

3) Use el DefinePlugin de DefinePlugin

Si solo desea usar const con valores de cadena para sus globales, entonces puede agregar este complemento a su lista de complementos de Webpack:

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

Úselo como:

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

4) Use el objeto de ventana global (o el Nodo 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/

Verá esto comúnmente utilizado para polyfills, por ejemplo: window.Promise = Bluebird

5) Use un paquete como dotenv

(Para proyectos del lado del servidor) El paquete dotenv tomará un archivo de configuración local (que puede agregar a su .gitignore si hay claves / credenciales) y agrega sus variables de configuración al objeto process.env de Node.

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

Cree un archivo .env en el directorio raíz de su proyecto. Agregue variables específicas del entorno en nuevas líneas en forma de NAME=VALUE . Por ejemplo:

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

Eso es.

process.env ahora tiene las claves y los valores que definió en su archivo .env .

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

Notas:

Con respecto a los elementos Externals de Webpack, úselo si desea excluir algunos módulos de su paquete integrado. Webpack hará que el módulo esté disponible globalmente, pero no lo incluirá en su paquete. Esto es útil para grandes bibliotecas como jQuery (porque los paquetes externos de sacudidas de árboles no funcionan en Webpack ) donde ya los ha cargado en su página en etiquetas de script separadas (tal vez de un CDN).

Answer 3

Puede usar define window.myvar = {} . Cuando quiera usarlo, puede usar como window.myvar = 1

Answer 4

Resolví este problema estableciendo las variables globales como propiedades estáticas en las clases para las que son más relevantes. En ES5 se ve así:

var Foo = function(){...};
Foo.globalVar = {};

Answer 5

Use DefinePlugin .

DefinePlugin le permite crear constantes globales que se pueden configurar en tiempo de compilación.

new webpack.DefinePlugin(definitions)

Ejemplo:

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

Uso:

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