Respostas:
Existem várias maneiras de abordar os globais:
O Webpack avalia os módulos apenas uma vez, para que sua instância permaneça global e faça alterações de módulo para módulo. Portanto, se você criar algo como globals.js
ae exportar um objeto de todos os seus globais, poderá import './globals'
e ler / gravar nesses globais. Você pode importar para um módulo, fazer alterações no objeto de uma função e importar para outro módulo e ler essas alterações em uma função. Lembre-se também da ordem em que as coisas acontecem. O Webpack primeiro pegará todas as importações e as carregará na ordem em que você começar entry.js
. Então ele será executado entry.js
. Então, onde você lê / escreve para globais é importante. É do escopo raiz de um módulo ou de uma função chamada posteriormente?
Nota : Se você deseja que a instância seja new
sempre, use uma classe ES6 . Tradicionalmente, em JS, você capitaliza classes (em oposição à minúscula para objetos) como
import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()
Veja como você pode fazê-lo usando o ProvidePlugin do Webpack (que disponibiliza um módulo como variável em todos os módulos e apenas nos módulos em que você realmente o usa). Isso é útil quando você não deseja continuar digitando import Bar from 'foo'
repetidamente. Ou você pode trazer em um pacote como jQuery ou lodash tão global aqui (embora você pode dar uma olhada de Webpack Externals ).
Etapa 1) Crie qualquer módulo. Por exemplo, um conjunto global de utilitários seria útil:
utils.js
export function sayHello () {
console.log('hello')
}
Etapa 2) Alias o módulo e adicione ao 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'
})
]
}
Agora basta chamar utils.sayHello()
qualquer arquivo js e ele deve funcionar. Certifique-se de reiniciar o servidor dev se estiver usando isso com o Webpack.
Nota: Não esqueça de informar o seu interlocutor sobre o global, para que não se queixe. Por exemplo, veja minha resposta para ESLint aqui .
Se você quiser apenas usar const com valores de string para seus globais, adicione este plug-in à sua lista de plug-ins do Webpack:
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
Use-o 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/
Você verá isso comumente usado em polyfills, por exemplo: window.Promise = Bluebird
(Para projetos do lado do servidor) O pacote dotenv pega um arquivo de configuração local (que você pode adicionar ao seu .gitignore se houver alguma chave / credencial) e adiciona suas variáveis de configuração ao objeto process.env do Node .
// As early as possible in your application, require and configure dotenv.
require('dotenv').config()
Crie um .env
arquivo no diretório raiz do seu projeto. Adicione variáveis específicas do ambiente em novas linhas na forma de NAME=VALUE
. Por exemplo:
DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3
É isso aí.
process.env
agora tem as chaves e os valores que você definiu no seu .env
arquivo.
var db = require('db')
db.connect({
host: process.env.DB_HOST,
username: process.env.DB_USER,
password: process.env.DB_PASS
})
Em relação aos externos do Webpack , use-o se desejar excluir alguns módulos da inclusão em seu pacote configurável. O Webpack disponibilizará o módulo globalmente, mas não o colocará em seu pacote. Isso é útil para grandes bibliotecas como o jQuery (porque pacotes externos de agitação de árvore não funcionam no Webpack ), onde você já os carregou em sua página em tags de script separadas (talvez de uma CDN).
externals
se você precisar criar uma variável global. Exemplo: externals: { 'webpackVariables': `{ serverUrl: '${ env.server }', cordovaBuild: '${ env.cordova }', }`, },
Em seguida, use-o comoconst webpackVariables = require('webpackVariables');
declare const isProduction: bool;
Para referência, consulte typescriptlang.org/docs/handbook/declaration-files/templates/…
Eu estava prestes a fazer a mesma pergunta. Depois de pesquisar um pouco mais e decyphering parte da documentação do Webpack Eu acho que o que você quer é o output.library
e output.libraryTarget
no webpack.config.js
arquivo.
Por exemplo:
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'
...
}
Agora, se você vincular o www/js/index.js
arquivo gerado em uma tag de script html, poderá acessar myLibrary.foo
de qualquer lugar em seus outros scripts.
export { foo }
no index.js
?
Use DefinePlugin .
O DefinePlugin permite criar constantes globais que podem ser configuradas em tempo de compilação.
new webpack.DefinePlugin(definitions)
plugins: [
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true)
})
//...
]
console.log(`Environment is in production: ${PRODUCTION}`);
Você pode usar define window.myvar = {}
. Quando você quiser usá-lo, você pode usar comowindow.myvar = 1
var window.CKEDITOR_BASEPATH = {};
erro é "token inesperado" depoiswindow.
var
palavra - chave. window.CKEDITOR_BASEPATH = {};
utils
espaço para nome no arquivo de destino - inicialmente, acabei de colocar um ponto de interrupção no navegador janela de origem e eu fiquei intrigado sobre o porquêutils
não foi definido. Finalmente, descobri que o webpack (de maneira bastante inteligente) inclui apenas um módulo se o seu espaço para nome for referenciado pelo menos uma vez. Portanto, uma vez que eu prefácio uma das funções utilitárias do arquivo de destinoutils
, o módulo foi incluído.