React z Babel i automatyczne budowanie

Odpowiedz Nowy wątek
2018-07-06 20:48
0

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

$ 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.

Pozostało 580 znaków

2018-07-06 21:40
1

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

Chcę się nauczyć korzystać z pakietów zaczynając od pustego projektu, ale dzięki. - bakunet 2018-07-06 21:43

Pozostało 580 znaków

2018-07-06 22:12
0

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

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

otrzymuję błąd:

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

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

Pozostało 580 znaków

2018-07-06 22:28
0

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

Pokaż pozostałe 3 komentarze
Tam jest Gulp - to też wymierająca technologia - poczytaj o npm scripts. - Maciej Cąderek 2018-07-06 23:36
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. - Maciej Cąderek 2018-07-07 00:20
Ale przejrzałem z grubsza dokumentację i nie znalazłem jeszcze nic na temat automatyzacji. Poszukam dalej... - bakunet 2018-07-07 11:16
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[...]guide-to-webpack-b1f1a3638460 i https://www.robinwieruch.de/m[...]abel-setup/#babel-react-setup - bakunet 2018-07-07 14:17

Pozostało 580 znaków

2018-07-06 22:52
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 :(

Pozostało 580 znaków

2018-07-06 22:59

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, 2018-07-06 23:01
Pokaż pozostałe 2 komentarze
Ale domyślam się, że porównując Webpack i Watch, Webpack jest wygodniejszy i kompletniejszy, jeśli się wie jak go skonfigurować? - bakunet 2018-07-06 23:14
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. - Maciej Cąderek 2018-07-06 23:21
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. - bakunet 2018-07-06 23:23
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). - Maciej Cąderek 2018-07-06 23:28
Już zdążyłem się zastanowić i jestem w połowie artykułu http://kursjs.pl/kurs/es6/webpack.php - bakunet 2018-07-06 23:30

Pozostało 580 znaków

2018-07-06 23:14
0

Webpack albo Parcel Bundler.


Be yourself, go your way.
Do not listen to advice.
Move every day.
To heaven.

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0