React z Babel i automatyczne budowanie

React z Babel i automatyczne budowanie
bakunet
  • Rejestracja:około 8 lat
  • Ostatnio:11 minut
  • Lokalizacja:Polska
  • Postów:1609
0

Hej, trochę utknąłem. Przerabiam książkę gdzie uczą mnie jak wykorzystać pakiety:

Kopiuj
$ npm install --save-dev react
$ npm install --save-dev react-dom
$ npm install --save-dev babel-preset-react
$ npm install --save-dev babel-preset-es2015

Ręczna transpilacja i pakowanie wychodzi spoko. Jednak z podrozdziału "Budowanie podczas rozwijania aplikacji" już nie za bardzo. Każą mi tam korzystać z pakietu $ npm install --save-dev watch , utworzyć plik build.sh i wywołać $ watch sh scripts/build.sh js/source css, czyli obserwację folderów ze skryptami. Udało mi się pokonać problem użycia "sh" w konsoli windowsowej instalując Git Bash. Jednak w.w. komenda daje mi: "Error: ENOTDIR: not a directory, scandir '(tu ścieżka do pliku build.sh)".

Zastanawiam się, co robię źle? Lub może będzie w stanie mi podsunąć jakąś konfigurację pakietów, które będą w stanie automatycznie przetwarzać JSX->JS. Z góry dzięki.

Burtoon
  • Rejestracja:ponad 7 lat
  • Ostatnio:ponad 6 lat
1

Skorzytaj z create-react-app i nie bedziesz musial poki co nic konfigurowac.

bakunet
Chcę się nauczyć korzystać z pakietów zaczynając od pustego projektu, ale dzięki.
bakunet
  • Rejestracja:około 8 lat
  • Ostatnio:11 minut
  • Lokalizacja:Polska
  • Postów:1609
0

Ok, okazuje się, że jednak konsola wciąż nie rozpoznaje 'sh'. Przy wywołaniu

Kopiuj
watch "sh wwwroot/scripts/build.sh" wwwroot/js/source wwwroot/css

otrzymuję błąd:

Kopiuj
'sh' is not recognized as an internal or external command, operable program or batch file.

I nie umiem sobie z tym poradzić pod Windows :/

Maciej Cąderek
Maciej Cąderek
  • Rejestracja:ponad 9 lat
  • Ostatnio:ponad 3 lata
  • Lokalizacja:Warszawa
  • Postów:1264
0

Nie ma potrzeby używać plików .sh - większość projektów używa Webpacka do (między innymi) budowania aplikacji.

Zobacz pozostałe 3 komentarze
Maciej Cąderek
Maciej Cąderek
Tam jest Gulp - to też wymierająca technologia - poczytaj o npm scripts.
Maciej Cąderek
Maciej Cąderek
Pewnie jak się domyśliłeś komentarz dotyczył nie tego posta ;) Dotyczyło to http://kursjs.pl/kurs/es6/webpack.php. Ogólnie start wg dokumentacji to dobry pomysł, tam jest to ok.
bakunet
Ale przejrzałem z grubsza dokumentację i nie znalazłem jeszcze nic na temat automatyzacji. Poszukam dalej...
bakunet
Uff, metodą prób i błędów (głównie) udało mi się w końcu skonfigurować Webpack tak, żeby działał z React, Babel i Watch. Pomogły mi w tym w arty: https://medium.com/javascript-training/beginner-s-guide-to-webpack-b1f1a3638460 i https://www.robinwieruch.de/minimal-react-webpack-babel-setup/#babel-react-setup
bakunet
  • Rejestracja:około 8 lat
  • Ostatnio:11 minut
  • Lokalizacja:Polska
  • Postów:1609
0

Update: Korzystając z Git bash- sh.exe, i mając zainstalowany Watch pack, wpisując watch "sh wwwroot/scripts/build.sh" wwwroot/js/source wwwroot/css konsola mi mówi, że: bash: watch: command not found :(

Maciej Cąderek
Maciej Cąderek
  • Rejestracja:ponad 9 lat
  • Ostatnio:ponad 3 lata
  • Lokalizacja:Warszawa
  • Postów:1264
1

Cięzko żeby zadziałał Ci pakiet dodany lokalnie gdy go tak odpalasz, opcje są dwie:

  • zainstalować watch globalnie npm i watch -g (nie wiem czy to zadziała w git-bashu)
  • odpalić za pomocą npx: npx watch ... (npx jest dostępny jak masz w miarę nową wersję npm'a)

PS
Tak czy inaczej, bawienie się w sh, gdy masz lepsze (i multiplatformowe) narzędzia do tego przeznaczone, to słaby pomysł (może masz jakąś starą książkę).

edytowany 4x, ostatnio: Maciej Cąderek
Zobacz pozostałe 2 komentarze
bakunet
Ale domyślam się, że porównując Webpack i Watch, Webpack jest wygodniejszy i kompletniejszy, jeśli się wie jak go skonfigurować?
Maciej Cąderek
Maciej Cąderek
Ciężko je w ogóle porównywać bo watch to tylko jedno narzędzie, a Webpack to multitool, który Ci nawet kanapki zrobi.
bakunet
W zasadzie to chcę sobie ogarnąć React i JSX, watch powinien mi wystarczyć do tego celu. Ale domyślam się, że Webpack to standard we froncie.
Maciej Cąderek
Maciej Cąderek
To zastanów się czy jest sens babrać się ręcznie w jakieś skrypty sh których i tak się nie używa w realnych projektach (znaczy czasem się używa, ale nie do tego). Albo Webpack albo jak wspomniał @Burtoon - create-react-app (bardzo dobra opcja).
bakunet
Już zdążyłem się zastanowić i jestem w połowie artykułu http://kursjs.pl/kurs/es6/webpack.php
SI
  • Rejestracja:około 7 lat
  • Ostatnio:24 minuty
  • Postów:109
0

Webpack albo Parcel Bundler.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.