Réponses:
Il existe plusieurs façons d'aborder les globaux:
Webpack évalue les modules une seule fois, de sorte que votre instance reste globale et effectue les modifications d'un module à l'autre. Donc, si vous créez quelque chose comme a globals.js
et exportez un objet de tous vos globals, vous pouvez import './globals'
et lire / écrire dans ces globals. Vous pouvez importer dans un module, apporter des modifications à l'objet à partir d'une fonction et importer dans un autre module et lire ces modifications dans une fonction. Souvenez-vous également de l'ordre dans lequel les choses se passent. Webpack prendra d'abord toutes les importations et les chargera dans l'ordre en commençant dans votre entry.js
. Ensuite, il s'exécutera entry.js
. Donc, où vous lisez / écrivez dans les globaux est important. Est-ce de la portée racine d'un module ou dans une fonction appelée plus tard?
Remarque : si vous souhaitez que l'instance soit à new
chaque fois, utilisez une classe ES6 . Traditionnellement dans JS, vous mettriez les classes en majuscules (par opposition aux minuscules pour les objets) comme
import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()
Voici comment vous pouvez le faire en utilisant le ProviderPlugin de Webpack (qui rend un module disponible en tant que variable dans chaque module et uniquement les modules où vous l'utilisez réellement). Ceci est utile lorsque vous ne voulez pas continuer à taper import Bar from 'foo'
encore et encore. Ou vous pouvez apporter un package comme jQuery ou lodash en tant que global ici (bien que vous puissiez jeter un oeil à Webpack's Externals ).
Étape 1) Créez n'importe quel module. Par exemple, un ensemble global d'utilitaires serait pratique:
utils.js
export function sayHello () {
console.log('hello')
}
Étape 2) Alias le module et ajouter à FournirPlugin:
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'
})
]
}
Maintenant, appelez simplement utils.sayHello()
n'importe quel fichier js et cela devrait fonctionner. Assurez-vous de redémarrer votre serveur de développement si vous l'utilisez avec Webpack.
Remarque: n'oubliez pas de parler à votre linter du global pour qu'il ne se plaigne pas. Par exemple, voir ma réponse pour ESLint ici .
Si vous souhaitez simplement utiliser const avec des valeurs de chaîne pour vos globals, vous pouvez ajouter ce plugin à votre liste de plugins Webpack:
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
Utilisez-le comme:
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/
Vous verrez ceci couramment utilisé pour les polyfills, par exemple: window.Promise = Bluebird
(Pour les projets côté serveur) Le package dotenv prendra un fichier de configuration local (que vous pouvez ajouter à votre .gitignore s'il y a des clés / informations d'identification) et ajoute vos variables de configuration à l' objet process.env de Node .
// As early as possible in your application, require and configure dotenv.
require('dotenv').config()
Créez un .env
fichier dans le répertoire racine de votre projet. Ajoutez des variables spécifiques à l'environnement sur de nouvelles lignes sous la forme de NAME=VALUE
. Par exemple:
DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3
C'est tout.
process.env
a maintenant les clés et les valeurs que vous avez définies dans votre .env
fichier.
var db = require('db')
db.connect({
host: process.env.DB_HOST,
username: process.env.DB_USER,
password: process.env.DB_PASS
})
En ce qui concerne les externes de Webpack , utilisez-le si vous souhaitez exclure certains modules d'être inclus dans votre bundle construit. Webpack rendra le module disponible dans le monde entier mais ne le mettra pas dans votre bundle. C'est pratique pour les grandes bibliothèques comme jQuery (car les paquets externes qui secouent les arbres ne fonctionnent pas dans Webpack ) où vous les avez déjà chargés sur votre page dans des balises de script séparées (peut-être à partir d'un CDN).
externals
place si vous devez créer une variable globale. Exemple: externals: { 'webpackVariables': `{ serverUrl: '${ env.server }', cordovaBuild: '${ env.cordova }', }`, },
Ensuite, utilisez-le commeconst webpackVariables = require('webpackVariables');
declare const isProduction: bool;
Pour référence, consultez typescriptlang.org/docs/handbook/declaration-files/templates
J'étais sur le point de poser la même question. Après avoir cherché un peu plus loin et déchiffré une partie de la documentation de Webpack, je pense que ce que vous voulez, c'est le output.library
et output.libraryTarget
dans le webpack.config.js
fichier.
Par exemple:
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'
...
}
Maintenant, si vous liez le www/js/index.js
fichier généré dans une balise de script html, vous pouvez accéder à myLibrary.foo
partir de n'importe où dans vos autres scripts.
export { foo }
dans le index.js
?
Utilisez DefinePlugin .
Le DefinePlugin vous permet de créer des constantes globales qui peuvent être configurées au moment de la compilation.
new webpack.DefinePlugin(definitions)
plugins: [
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true)
})
//...
]
console.log(`Environment is in production: ${PRODUCTION}`);
Vous pouvez utiliser define window.myvar = {}
. Lorsque vous souhaitez l'utiliser, vous pouvez utiliser commewindow.myvar = 1
var window.CKEDITOR_BASEPATH = {};
Erreur est "Jeton inattendu" aprèswindow.
var
mot-clé. window.CKEDITOR_BASEPATH = {};
utils
espace de noms dans le fichier cible - au départ, je venais de mettre un point d'arrêt dans le navigateur. fenêtre source et je n'arrêtais pas de me demander pourquoiutils
n'était pas définie. Enfin j'ai découvert que webpack (plutôt intelligemment) ne comprend un module si son espace de noms est référencé au moins une fois. Par conséquent, une fois que j'ai fait la préface de l'une des fonctions utilitaires du fichier cible avecutils
, le module a été inclus.