Warunkowy import

[Roman Tyczka]

Mam zatem tego webpacka skonfigurowanego, w nim babel i inne dodatki.
I teraz mam kod, klasę, która służy do łączenia do serwera REST, klasa jest
w osobnym pliku, ale ES6 ma funkcjonalność import więc to nie problem. Ale
ta klasa w konstruktorze oczekuje obiektu z parametrami połączenia do tego
serwera i oczywiście inne są te dane dla produkcji a inne dla deweloperki.
Na poziomie generowania plików webpackiem, wiem czy generuję w trybie
produkcji czy deweloperskim. Jak to połączyć? Czyli w jaki sposób zrobić
przekazywanie parametrów zależnie od trybu pracy webpacka?

W PHP było prosto, miałem dwa pliki konfiguracyjne o tej samej nazwie, ale
różnej zawartości, wiadomo o co chodzi. Tutaj nie wiem jak to ugryźć.

[Roman Tyczka]

Post by Roman Tyczka
Mam zatem tego webpacka skonfigurowanego, w nim babel i inne dodatki.
I teraz mam kod, klasę, która służy do łączenia do serwera REST, klasa jest
w osobnym pliku, ale ES6 ma funkcjonalność import więc to nie problem. Ale
ta klasa w konstruktorze oczekuje obiektu z parametrami połączenia do tego
serwera i oczywiście inne są te dane dla produkcji a inne dla deweloperki.
Na poziomie generowania plików webpackiem, wiem czy generuję w trybie
produkcji czy deweloperskim. Jak to połączyć? Czyli w jaki sposób zrobić
przekazywanie parametrów zależnie od trybu pracy webpacka?

Trochę mi to zajęło, ale mam rozwiązanie i nawet działa, choć inaczej niż
chciałem:

https://webpack.js.org/plugins/define-plugin/

[Borys Pogoreło]

Post by Roman Tyczka
Trochę mi to zajęło, ale mam rozwiązanie i nawet działa, choć inaczej niż

Nie kombinuj z różnymi buildami dla testów/produkcji, tylko skorzystaj z
plików konfiguracyjnych lub zmiennych środowiskowych.

[Roman Tyczka]

Post by Borys Pogoreło

Post by Roman Tyczka
Trochę mi to zajęło, ale mam rozwiązanie i nawet działa, choć inaczej niż

Nie kombinuj z różnymi buildami dla testów/produkcji, tylko skorzystaj z
plików konfiguracyjnych lub zmiennych środowiskowych.

W package.json mam kilka buildów:

"dev": "webpack --mode development",
"build": "npm run clean && webpack --mode production"

ale webpack.config.js mam jedno i w nim sprawdzam "mode" i steruję
przetwarzaniem plików, czy inaczej to powinienem robić?

[Borys Pogoreło]

Post by Roman Tyczka
ale webpack.config.js mam jedno i w nim sprawdzam "mode" i steruję
przetwarzaniem plików, czy inaczej to powinienem robić?

To znów nie ma żadnego związku z webpackiem, chyba że konkretnie chcesz
mieć inne pakiety wynikowe na produkcję (np. z wyciętym kodem debug). To
aplikacja powinna wspierać różne konfiguracje zależnie od środowiska.

[Roman Tyczka]

Post by Borys Pogoreło

Post by Roman Tyczka
ale webpack.config.js mam jedno i w nim sprawdzam "mode" i steruję
przetwarzaniem plików, czy inaczej to powinienem robić?

To znów nie ma żadnego związku z webpackiem, chyba że konkretnie chcesz
mieć inne pakiety wynikowe na produkcję (np. z wyciętym kodem debug). To
aplikacja powinna wspierać różne konfiguracje zależnie od środowiska.

Ok, to napisz konkretniej jak to powinno wyglądać, bo mi nic te zdawkowe
odpowiedzi nie podpowiadają, a chętnie się dowiem jak to się poprawnie
robi. Póki co mam tak, że mam dwie "kompilacje", jedna produkcyjna, która
jest zminifikowana (bez komentarzy, bez console.log, itd.), a druga
developerska/debugowa, która ma pełny kod i mogę ją testować. Sama
aplikacja JS jest w jednej wersji, poza drobną różnicą z adresami serwera
RESTowego do którego się łączy.

[Borys Pogoreło]

Post by Roman Tyczka
developerska/debugowa, która ma pełny kod i mogę ją testować. Sama
aplikacja JS jest w jednej wersji, poza drobną różnicą z adresami serwera
RESTowego do którego się łączy.

Ja polecam przykładowo ten pakiet:
https://www.npmjs.com/package/dotenv
który pozwala łatwo łączyć zmienne środowiskowe z plikiem konfiguracyjnym -
wtedy możesz sobie to poukładać jak tylko Ci wygodniej. A obiekt parametrów
połączenia sobie budujesz z wartości odczytanych z process.env.*

[rePeter]

Fri, 11 Jan 2019 09:19:25 +0100

Post by Roman Tyczka
Mam zatem tego webpacka skonfigurowanego, w nim babel i inne dodatki.
I teraz mam kod, klasę, która służy do łączenia do serwera REST, klasa jest
w osobnym pliku, ale ES6 ma funkcjonalność import więc to nie problem. Ale
ta klasa w konstruktorze oczekuje obiektu z parametrami połączenia do tego
serwera i oczywiście inne są te dane dla produkcji a inne dla deweloperki.
Na poziomie generowania plików webpackiem, wiem czy generuję w trybie
produkcji czy deweloperskim. Jak to połączyć? Czyli w jaki sposób zrobić
przekazywanie parametrów zależnie od trybu pracy webpacka?
W PHP było prosto, miałem dwa pliki konfiguracyjne o tej samej nazwie, ale
różnej zawartości, wiadomo o co chodzi. Tutaj nie wiem jak to ugryźć.

Wystarczyłby jeden plik konfiguracyjny z warunkiem sprawdzającym czy jest odpalony na
localhoscie czy gdzie tam masz środowisko developerskie. To samo w JS.