Respuestas:
Hay varias formas de acercarse a los globales:
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 a globals.js
y exporta un objeto de todas sus globales, puede import './globals'
leer y escribir en estas globales. 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
. Entonces se 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()
A continuación, le mostramos cómo puede hacerlo utilizando ProvidePlugin de Webpack (que hace que un módulo esté disponible como 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 externos 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 utils.sayHello()
a 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í .
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");
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
(Para proyectos del lado del servidor) El paquete dotenv tomará un archivo de configuración local (que podría agregar a su .gitignore si hay claves / credenciales) y agregará 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 .env
archivo 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 .env
archivo.
var db = require('db')
db.connect({
host: process.env.DB_HOST,
username: process.env.DB_USER,
password: process.env.DB_PASS
})
Con respecto a los elementos externos 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).
externals
en su lugar si necesita crear una variable global. Ejemplo: externals: { 'webpackVariables': `{ serverUrl: '${ env.server }', cordovaBuild: '${ env.cordova }', }`, },
luego usarlo comoconst webpackVariables = require('webpackVariables');
declare const isProduction: bool;
Como referencia, mira esto typescriptlang.org/docs/handbook/declaration-files/templates/...
Estaba a punto de hacer la misma pregunta. Después de buscar un poco más y descifrar parte de la documentación del paquete web, creo que lo que quieres es el output.library
y output.libraryTarget
en el webpack.config.js
archivo.
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 www/js/index.js
archivo generado en una etiqueta de script html, puede acceder myLibrary.foo
desde cualquier otro lugar en sus otros scripts.
export { foo }
en el index.js
?
Use DefinePlugin .
DefinePlugin le permite crear constantes globales que se pueden configurar en tiempo de compilación.
new webpack.DefinePlugin(definitions)
plugins: [
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true)
})
//...
]
console.log(`Environment is in production: ${PRODUCTION}`);
Puedes usar define window.myvar = {}
. Cuando quieras usarlo, puedes usar comowindow.myvar = 1
var window.CKEDITOR_BASEPATH = {};
Error es "Token inesperado" despuéswindow.
var
palabra clave window.CKEDITOR_BASEPATH = {};
utils
espacio de nombres en el archivo de destino; inicialmente solo había puesto un punto de interrupción en el navegador ventana de origen y seguí pensando por quéutils
no se definió. Finalmente descubrí que webpack (de manera inteligente) solo incluye un módulo si su espacio de nombres se hace referencia al menos una vez. Por lo tanto, una vez que introduje una de las funciones de utilidad del archivo de destinoutils
, se incluyó el módulo .