Estou tentando converter um aplicativo angular do gulp para o webpack. no gulp, uso o gulp-preprocess para substituir algumas variáveis na página html (por exemplo, nome do banco de dados), dependendo do NODE_ENV. Qual é a melhor maneira de obter um resultado semelhante com o webpack?
javascript
webpack
kpg
fonte
fonte
Respostas:
Existem duas maneiras básicas de conseguir isso.
DefinePlugin
Observe que isso substituirá apenas as correspondências "como estão". É por isso que a string está no formato que está. Você poderia ter uma estrutura mais complexa, como um objeto, mas você entendeu a ideia.
EnvironmentPlugin
EnvironmentPlugin
usaDefinePlugin
internamente e mapeia os valores do ambiente para codificá-lo. Sintaxe Terser.Alias
Como alternativa, você pode consumir a configuração por meio de um módulo com alias . Do lado do consumidor, ficaria assim:
A configuração em si poderia ter esta aparência:
Digamos que
process.env.NODE_ENV
édevelopment
. Seria mapeado para./config/development.js
então. O módulo para o qual ele mapeia pode exportar configurações como esta:fonte
JSON.stringify()
'process.env.NODE_ENV': `"${process.env.NODE_ENV || 'development'}"`
JSON.stringify('development')
como está pode não ser realmente útil. Em vez dissoJSON.stringify(someVariable)
pode ser bastante!NODE_ENV
fazer isso. Como definir isso depende da sua plataforma.process.env.NODE_ENV
padrão e funciona.Apenas outra opção, se você deseja usar apenas uma interface
define
CLI , basta usar a opção do webpack. Eu adiciono o seguinte script no meupackage.json
:Então eu só tenho que correr
npm run build-production
.fonte
Eu investiguei algumas opções sobre como definir variáveis específicas do ambiente e acabei com isso:
Atualmente, tenho 2 configurações do webpack:
webpack.production.config.js
webpack.config.js
No meu código, obtenho o valor de API_URL desta maneira (breve):
const apiUrl = process.env.API_URL;
EDIT 3 de novembro de 2016
Os documentos do Webpack têm um exemplo: https://webpack.js.org/plugins/define-plugin/#usage
Com o ESLint, você precisa permitir especificamente variáveis indefinidas no código, se você tiver uma
no-undef
regra. http://eslint.org/docs/rules/no-undef assim:EDIT 7 de setembro de 2017 (específico para Create-React-App)
Se você não gosta muito de configurar, confira Create-React-App: Create-React-App - Adicionando variáveis de ambiente personalizadas . Sob o capô, o CRA usa o Webpack de qualquer maneira.
fonte
process.env
,process.env.PORT
por exemplo, não resolveundefined
durante a compilação do webpack, o que significa que você não pode mais substituir a porta do ambiente?Você pode passar qualquer argumento da linha de comando sem plugins adicionais usando
--env
desde o webpack 2:Usando a variável em webpack.config.js:
Fonte
fonte
Você pode usar diretamente o
EnvironmentPlugin
disponível emwebpack
para ter acesso a qualquer variável de ambiente durante a transpilação.Você apenas tem que declarar o plugin no seu
webpack.config.js
arquivo:Observe que você deve declarar explicitamente o nome das variáveis de ambiente que deseja usar.
fonte
Para adicionar pessoalmente ao grupo de respostas, prefiro o seguinte:
Usando isso, não há problemas na variável de ambiente ou entre plataformas (com env vars). Tudo o que você faz é executar o normal
webpack
ou o desenvolvimentowebpack -p
ou a produção, respectivamente.Referência: Problema no Github
fonte
'process.env.NODE_ENV': JSON.stringify('production')
sobreprocess: { env: { NODE_ENV: JSON.stringify('production') } }
. O uso deste último substituirá o objeto do processo, o que pode quebrar a compatibilidade com alguns módulos que esperam que outros valores no objeto do processo sejam definidos.Como minha Edição na postagem acima, pela thevangelist, não foi aprovada , postando informações adicionais.
Se você deseja escolher o valor do package.json como um número de versão definido e acessá-lo através do DefinePlugin dentro do Javascript.
Em seguida, importe package.json dentro do respectivo webpack.config , acesse o atributo usando a variável import e use o atributo no DefinePlugin .
Por exemplo, determinada configuração no webpack.config está usando o METADATA for DefinePlugin:
Acesse isso dentro de qualquer arquivo datilografado:
A maneira mais inteligente seria assim:
Agradecimentos a Ross Allen
fonte
Apenas outra resposta semelhante à resposta do @ zer0chain. No entanto, com uma distinção.
A configuração
webpack -p
é suficiente.É o mesmo que:
E isso é o mesmo que
Portanto, você pode precisar apenas de algo assim no
package.json
arquivo Node:Apenas algumas dicas do DefinePlugin :
Isso é para que você possa verificar se digita
webpack --help
fonte
Para adicionar ao grupo de respostas:
Use ExtendedDefinePlugin em vez de DefinePlugin
O ExtendedDefinePlugin é muito mais simples de usar e está documentado :-) link
Como o DefinePlugin não possui boa documentação, quero ajudar, dizendo que ele realmente funciona como # DEFINE em c # .
Portanto, se você quiser entender como o DefinePlugin funciona, leia a c # #define a duplicação. ligação
fonte
Eu prefiro usar o arquivo .env para ambiente diferente.
env.dev
para .env na pasta raizenv.prod
para .enve no código
usar
require('dotenv').config(); const API = process.env.API ## which will store the value from .env file
fonte
Eu achei a solução a seguir mais fácil de configurar a variável de ambiente para o Webpack 2:
Por exemplo, temos as configurações de um webpack:
Adicionar variável de ambiente no Webpack:
Defina a variável de plug-in e adicione-a a
plugins
:Agora, ao executar o comando webpack, passe
env.NODE_ENV
como argumento:Agora você pode acessar a
NODE_ENV
variável em qualquer lugar do seu código.fonte
Desde o Webpack v4, basta definir
mode
na sua configuração do Webpack o conjuntoNODE_ENV
para você (viaDefinePlugin
). Documentos aqui.fonte
Aqui está uma maneira que funcionou para mim e me permitiu manter minhas variáveis de ambiente secas reutilizando um arquivo json.
fonte
Eu não sou um grande fã de ...
... como não fornece nenhum tipo de segurança. em vez disso, você acaba aprimorando suas coisas secretas, a menos que você adicione um webpack ao gitignore there️, existe uma solução melhor.
Basicamente, com esta configuração, quando você compilar seu código, todas as variáveis env do processo serão removidas de todo o código, não haverá um único processo.env.VAR, graças ao plugin babel
transform-inline-environment-variables
PS, se você não quiser acabar com várias definições indefinidas, chame o env.js antes de o webpack chamar babel-loader, é por isso que é a primeira coisa que o webpack chama. a matriz de vars no arquivo babel.config.js deve corresponder ao objeto em env.js. Agora, há apenas uma coisa a ser cortada. adicione um.env
arquivo, coloque todas as suas variáveis env lá, o arquivo deve estar na raiz do projeto ou fique à vontade para adicioná-lo onde quiser, apenas certifique-se de definir o mesmo local no arquivo env.js e adicioná-lo a gitignoreSe você quiser ver todo o babel + webpack + ts obtê-lo do heaw
https://github.com/EnetoJara/Node-typescript-babel-webpack.git
e a mesma lógica se aplica para reagir e todos os outros
env.js
arquivo webpack sem plugins troll
babel.config.js
fonte
Não sei por que, mas ninguém realmente menciona a solução mais simples. Isso funciona para mim para nodejs e grunhido. Quanto a muitas pessoas, o webpack pode ser confuso, basta usar a linha abaixo:
process.env.NODE_ENV = 'production';
Com a solução acima, você realmente não precisa usar o envify ou o webpack. Às vezes, a solução simples codificada pode funcionar para algumas pessoas.
fonte