Zmienna środowiskowa z pakietem internetowym na temat dev i produkcji

Question

Jestem całkiem nowy w świecie używania takich narzędzi do budowy, jak Webpack i jego krewni, więc może to pytanie jest trochę nieobliczalne, ale proszę mnie zrozumieć.

background: Zajmuję się tworzeniem aplikacji sieciowej po stronie klienta (przy użyciu reaktsy + redux) i korzystam z pakietu internetowego jako mojego narzędzia do budowania i programu ładującego dla serwera dev. W tej chwili muszę utworzyć kilka linii kodu tylko w środowisku deweloperów (logowanie i inne). Więc widziałem nad siatką wykorzystanie webpack.DefinePlugin wtyczki ustawić zmienną process.env.NODE_ENV a kod jest tak:

plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') 
     }) 
] 

Następnie jeśli NODE_ENV varibale nie jest ustawiony na moim komputerze (który nie jest w tej chwili) to automatycznie ustawiony na rozwój. Czy mam rację?

Co z maszyną produkcyjną? czy muszę ustawić tę zmienną env na "production" w pliku /etc/environment?

Kolejne pytanie brzmi, w jaki sposób pakiet internetowy wie, jaki jest NODE_ENV, gdy obsługuję aplikację? czy jest skompilowany, gdy wykonuję kompilację na maszynie produkcyjnej i umieszczam ją w wbudowanym bundle.js? ($ webpack --progress -p)

Kolejne pytanie dotyczy sposobu włączania/wyłączania funkcji w środowisku produkcyjnym lub programistycznym? po prostu zrobić if warunek tak:

if(process.env.NODE_ENV == 'development'){ 
    console.log('this is visible in development'); 
} 

I ostatni, jeśli to jest to, co WebPACK naprawdę, jest to transpiling ten kawałek kodu do wbudowanych bundle.js? jeśli tak, to jest widoczne dla użytkownika końcowego? czy to ma coś wspólnego z tym?

Mam nadzieję, że nie za bardzo, dziękuję!

Answer 1

Na maszynie produkcyjnej można zbudować skrypty z poleceniem

NODE_ENV=production webpack 

Z drugiej strony przechodzącej tej zmiennej /etc/environment jest również rozwiązanie.

---

process.env.NODE_ENV przekształca ciąg statyczny w bundle.js

na przykład po uruchomieniu NODE_ENV=production webpack na tym fragmencie

if(process.env.NODE_ENV == 'development'){ 
    console.log('this is visible in development'); 
} 

w bundle.js znajdziesz (edytowane)

if ('production' == 'development') { 
    console.log('this is visible in development'); 
} 

if (false) { // 'production' == 'development' 
    console.log('this is visible in development'); 
} 

---

Więc według Pytanie o włączyć/wyłączyć funkcje kod jest poprawny.

---

Jeśli chcesz usunąć ciało stanie, jeśli jest fałszywe (jak w powyższym przykładzie nie chcesz pokazać console.log('this is visible in development'); w production środowiska), należy użyć

new webpack.optimize.UglifyJsPlugin() 

Usunie wszystkie twoje instrukcje if z warunkiem false.