javascript - script - webpack tutorial
Definir variable global con webpack (5)
¿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")
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.
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).
Puede usar define
window.myvar = {}
.
Cuando quiera usarlo, puede usar como
window.myvar = 1
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 = {};
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}`);