{"id":233880,"date":"2023-02-24T18:24:00","date_gmt":"2023-02-24T15:24:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233880"},"modified":"2022-11-11T12:57:18","modified_gmt":"2022-11-11T09:57:18","slug":"kompletny-przewodnik-po-tworzeniu-srodowiska-programistycznego-dla-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/kompletny-przewodnik-po-tworzeniu-srodowiska-programistycznego-dla-gutenberg\/","title":{"rendered":"Kompletny przewodnik po tworzeniu \u015brodowiska programistycznego dla Gutenberg"},"content":{"rendered":"\n

Ten przewodnik jest dla tych, kt\u00f3rzy chc\u0105 pisa\u0107 kod dla Gutenberga za pomoc\u0105 sk\u0142adni ES6, ESNext i JSX i musz\u0105 skonfigurowa\u0107 pakiet webpack i babel, aby przekszta\u0142ci\u0107 je w pliki, kt\u00f3rych mo\u017cna u\u017cywa\u0107 w edytorze Gutenberg. Przyjrzymy si\u0119, co musisz zrobi\u0107, dlaczego i jak mo\u017cemy u\u017cywa\u0107 i rozszerza\u0107 domy\u015blne ustawienia WordPressa oraz dostosowywa\u0107 je do naszych potrzeb.<\/p>\n

Je\u015bli jeste\u015b nowy w koncepcji ca\u0142ych npm, webpcak i Babel, powiniene\u015b przeczyta\u0107 nast\u0119pn\u0105 sekcj\u0119, kt\u00f3ra ma na celu wyja\u015bnienie podstaw dzia\u0142ania tych narz\u0119dzi i sposobu ich u\u017cywania. Je\u015bli jednak robi\u0142e\u015b to ju\u017c wcze\u015bniej i znasz ten proces, by\u0107 mo\u017ce poprzez programowanie w React, przejd\u017a do nast\u0119pnej sekcji, w kt\u00f3rej b\u0119dziemy w\u0142a\u015bciwie konfigurowa\u0107.<\/p>\n

Dla pocz\u0105tkuj\u0105cych: npm, webpack i babel<\/h2>\n

Je\u015bli nie masz pewno\u015bci, dlaczego musimy to wszystko zrobi\u0107, aby pisa\u0107 JavaScript dla Gutenberga, polecam przeczytanie mojego postu<\/a>, kt\u00f3ry bada podstawy programowania dla Gutenberga \u2013 gdzie wyja\u015bniam r\u00f3\u017cnic\u0119 w wersjach JavaScript i dlaczego jest to warte zachodu.<\/p>\n

Je\u015bli nigdy wcze\u015bniej tego nie robi\u0142e\u015b, najpierw musisz zainstalowa\u0107 Node.js<\/a> na swoim komputerze. Kliknij link, pobierz i zainstaluj. Zawarte w Node.js otrzymasz narz\u0119dzie, kt\u00f3rego u\u017cyjemy do skonfigurowania wi\u0119kszo\u015bci konfiguracji. Jest to narz\u0119dzie npm<\/code>, kt\u00f3re pozwala instalowa\u0107 biblioteki Javascript i uruchamia\u0107 skrypty za pomoc\u0105 wiersza polece\u0144 \/ terminala. Mo\u017cesz alternatywnie u\u017cy\u0107 yarn<\/code>, je\u015bli wolisz, ale w tym przewodniku u\u017cyjemy npm<\/code>.<\/p>\n

npm<\/h3>\n

Ten przewodnik nie zawiera szczeg\u00f3\u0142owych informacji o wszystkich czynno\u015bciach, z kt\u00f3rymi mo\u017cesz zrobi\u0107 npm<\/code>, ale wyja\u015bni podstawow\u0105 koncepcj\u0119 i rzeczy, kt\u00f3re s\u0105 istotne dla naszych cel\u00f3w. U\u017cyjemy npm<\/code>do dw\u00f3ch rzeczy; za instalowanie wymaganych bibliotek w naszym projekcie i uruchamianie polece\u0144 do budowania (kompilacji) naszych plik\u00f3w JavaScript.<\/p>\n

Dzi\u0119ki npm<\/code>niemu mo\u017cesz zainstalowa\u0107 dowolne publiczne pakiety JavaScript o otwartym kodzie \u017ar\u00f3d\u0142owym. Gdyby\u015bmy mieli programowa\u0107 w React (poza WordPress), musieliby\u015bmy zainstalowa\u0107 biblioteki React i biblioteki webpack. WordPress oferuje ca\u0142\u0105 gam\u0119 bibliotek (g\u0142\u00f3wnie dla Gutenberga), kt\u00f3re mo\u017cesz zainstalowa\u0107, ale tak naprawd\u0119 interesuje nas tylko jedna: @wordpress\/scripts<\/code>\u2013 kt\u00f3ra pomaga nam upro\u015bci\u0107 konfiguracj\u0119.<\/p>\n

Za ka\u017cdym razem, gdy instalujesz bibliotek\u0119, npm<\/code>utworzy podfolder \u201e node_modules<\/code>", w kt\u00f3rym przechowywane s\u0105 zainstalowane biblioteki. Nigdy nie b\u0119dziesz musia\u0142 wchodzi\u0107 do tego folderu ani niczego tutaj zmienia\u0107, ale pami\u0119taj, \u017ce ten folder z \u0142atwo\u015bci\u0105 b\u0119dzie zawiera\u0142 (dos\u0142ownie!) dziesi\u0105tki tysi\u0119cy Pliki. Jest to folder, kt\u00f3rego nigdy nie powiniene\u015b zobowi\u0105zywa\u0107 si\u0119 do git ani do\u0142\u0105cza\u0107 do \u017cadnego gotowego motywu lub wtyczki. Biblioteki s\u0105 potrzebne tylko podczas programowania.<\/p>\n

Po skonfigurowaniu \u015brodowiska mo\u017cesz u\u017cywa\u0107 npm<\/code>do uruchamiania skrypt\u00f3w zdefiniowanych w package.json<\/code>pliku. W zale\u017cno\u015bci od projektu normalnie masz co najmniej dwa skrypty; jeden do budowania skrypt\u00f3w, a drugi do uruchamiania \u201etrybu ogl\u0105dania”. W \u201etrybie ogl\u0105dania” npm<\/code>uruchamia proces w terminalu, kt\u00f3ry czeka i nas\u0142uchuje zmian dokonanych w dowolnym pliku i kompiluje je w czasie wykonywania, gdy klikniesz Zapisz. By\u0107 mo\u017ce znasz t\u0119 koncepcj\u0119, je\u015bli wcze\u015bniej korzysta\u0142e\u015b z kompilator\u00f3w SCSS lub LESS. O wiele bardziej wydajne jest uruchomienie skryptu \u201eobserwuj\u0105cego” w tle, kt\u00f3ry rekompiluje si\u0119 za ka\u017cdym razem, gdy zapisujesz, zamiast przechodzi\u0107 do terminala i uruchamia\u0107 polecenie budowania po ka\u017cdej zmianie.<\/p>\n

webpack i babel<\/h3>\n

Mo\u017cesz uzyska\u0107, rozwijaj\u0105c dla Gutenberga bez robienia jakiejkolwiek konfiguracji webpacka lub babel. Poniewa\u017c korzystamy z bibliotek WordPressa, zajm\u0105 si\u0119 tym za nas. Ma to jednak jedn\u0105 wad\u0119 \u2013 domy\u015blnie ma sta\u0142\u0105 lokalizacj\u0119 i nazw\u0119 pliku zar\u00f3wno dla plik\u00f3w \u017ar\u00f3d\u0142owych, jak i wyj\u015bciowych. Ca\u0142y program JavaScript musi by\u0107 napisany w jednym pliku, w project-folder\/src\/index.js<\/code>, a kompilacja zawsze ko\u0144czy si\u0119 w project-folder\/build\/index.js<\/code>. Je\u015bli nie masz nic przeciwko, mo\u017cesz pomin\u0105\u0107 ca\u0142\u0105 cz\u0119\u015b\u0107 dotycz\u0105c\u0105 konfiguracji webpacka. Je\u015bli jednak tworzysz motyw lub wtyczk\u0119 z kilkoma funkcjami Gutenberga (niestandardowe bloki, filtry itp.), Mo\u017cesz przynajmniej chcie\u0107 mie\u0107 inn\u0105 nazw\u0119 pliku wyj\u015bciowego i lokalizacj\u0119, a tak\u017ce zezwala\u0107 na wiele plik\u00f3w.<\/p>\n

Je\u015bli u\u017cywasz pakietu WordPress do obs\u0142ugi instalacji (@wordpress\/scripts<\/code>), Babel jest ju\u017c skonfigurowany. Ale powiniene\u015b mie\u0107 \u015bwiadomo\u015b\u0107, \u017ce pakiet WordPressa mo\u017ce nie zawiera\u0107 wtyczek, kt\u00f3rych mo\u017cesz chcie\u0107 u\u017cy\u0107. Istnieje na przyk\u0142ad pakiet, kt\u00f3ry pozwala na u\u017cycie nowych tak zwanych \u201efunkcji strza\u0142ek” (myFunction = (param) => { }<\/code>), do definiowania funkcji bez konieczno\u015bci wi\u0105zania this<\/code>. Je\u015bli absolutnie chcesz korzysta\u0107 z tych funkcji ESNext, musisz samodzielnie skonfigurowa\u0107 Babel zamiast korzysta\u0107 z domy\u015blnych ustawie\u0144 WordPressa. Przejd\u0119 poni\u017cej.<\/p>\n

Proces<\/h3>\n

Proces tworzenia za pomoc\u0105 webpacka po skonfigurowaniu i zainstalowaniu wszystkiego polega na przej\u015bciu do folderu projektu w terminalu i uruchomieniu skryptu \u201eobserwuj”. Pozostanie otwarty i b\u0119dzie s\u0142ucha\u0107 zmian wprowadzonych w plikach JS. Za ka\u017cdym razem, gdy klikniesz zapisz w plikach JavaScript, terminal wy\u015bwietli informacje (miejmy nadziej\u0119), \u017ce pomy\u015blnie ponownie skompilowa\u0142 plik. Je\u015bli wyst\u0105pi\u0142y jakie\u015b b\u0142\u0119dy kompilacji, pojawi\u0105 si\u0119 one w terminalu. Aby zatrzyma\u0107 proces \u201eogl\u0105dania”, naci\u015bnij CTRL + C.<\/p>\n

Konfigurowanie \u015brodowiska<\/h2>\n

Zak\u0142adam, \u017ce masz ju\u017c lokalny WordPress dzia\u0142aj\u0105cy na jakim\u015b stosie LAMP (programy takie jak WampServer, XAMPP, Docker lub podobne) i \u017ce masz wtyczk\u0119 lub motyw gotowy do rozpocz\u0119cia kodowania JavaScript.<\/p>\n

Zalecam utworzenie podfolderu dedykowanego do rozwoju JavaScript, poniewa\u017c mo\u017cesz otrzyma\u0107 kilka plik\u00f3w konfiguracyjnych i folder\u00f3w. U\u0142atwia to oddzielanie plik\u00f3w i folder\u00f3w (na przyk\u0142ad node_modules\/<\/code>), kt\u00f3rych nie chcesz uwzgl\u0119dnia\u0107 w zatwierdzeniach git lub ostatecznych kompilacjach. Ale ca\u0142kiem dobrze jest u\u017cy\u0107 g\u0142\u00f3wnego motywu lub folderu wtyczek jako folderu projektu do programowania JavaScript.<\/p>\n

W terminalu (terminal Mac OS lub wiersz polece\u0144 systemu Windows dzia\u0142aj\u0105 dobrze) przejd\u017a do folderu projektu. Je\u015bli chodzi o ten samouczek, za\u0142o\u017c\u0119, \u017ce jeste\u015bmy w motywie i utworzyli\u015bmy pusty podfolder gutenberg-dev\/<\/code>jako folder naszego projektu.<\/p>\n

Pierwszym krokiem jest zainicjowanie projektu npm \u2013 co w zasadzie jest po prostu nakazem npm<\/code>wygenerowania package.json<\/code>pliku. Ten package.json<\/code>plik informuje npm<\/code>, jakie pakiety s\u0105 wymagane i jakie skrypty s\u0105 dost\u0119pne do uruchomienia. Wpisz to w terminalu;<\/p>\n

npm init -y<\/code><\/pre>\n
Spowoduje to wygenerowanie package.json<\/code>pliku z domy\u015bln\u0105 zawarto\u015bci\u0105 w folderze projektu.<\/p>\n
Nast\u0119pnie zainstalujemy pakiet WordPress, kt\u00f3ry pomo\u017ce nam zmniejszy\u0107 ilo\u015b\u0107 konfiguracji, kt\u00f3re b\u0119dziemy musieli wykona\u0107. Uruchom to polecenie:<\/p>\n
npm install --save-dev --save-exact @wordpress\/scripts<\/code><\/pre>\n
Znacznik --save-dev<\/code>informuje npm<\/code>, \u017ce dane biblioteki s\u0105 potrzebne tylko do rozwoju i --save-exact<\/code>zapewnia, \u017ce npm<\/code>\u200b\u200bzainstalowano tylko jedn\u0105 wersj\u0119, najnowsz\u0105.<\/p>\n
Otw\u00f3rz package.json<\/code>plik w swoim edytorze. (npm<\/code>b\u0119dzie r\u00f3wnie\u017c wygenerowany package-lock.json<\/code>podczas instalacji pakiet\u00f3w, mo\u017cesz po prostu zignorowa\u0107 ten plik, package.json<\/code>b\u0119dziesz w nim wprowadza\u0107 zmiany). Powinien by\u0107 wype\u0142niony domy\u015bln\u0105 konfiguracj\u0105, a mo\u017cesz zauwa\u017cy\u0107, \u017ce instalacja pakietu, kt\u00f3r\u0105 przeprowadzili\u015bmy wcze\u015bniej, doda\u0142a wpis o @wordpress\/scripts<\/code>okre\u015blonej wersji w devDependencies<\/code>. Gdy zainstalujesz wi\u0119cej pakiet\u00f3w, npm<\/code>zaktualizuje package.json<\/code>si\u0119 wpisy dla ka\u017cdego pakietu. Jedyne, o co musimy si\u0119 martwi\u0107 w tym pliku, to scripts<\/code>w\u0142a\u015bciwo\u015b\u0107, kt\u00f3ra dotyczy skrypt\u00f3w (komend), kt\u00f3rych mo\u017cna u\u017cywa\u0107 npm<\/code>do uruchamiania. Zaktualizuj w\u0142a\u015bciwo\u015b\u0107 scripts do tego (mo\u017cesz usun\u0105\u0107 domy\u015blny \u201etest”):<\/p>\n
\"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\"\n},<\/code><\/pre>\n
Ten fragment kodu m\u00f3wi npm<\/code>, \u017ce mamy dwa skrypty, kt\u00f3re mo\u017cemy uruchomi\u0107 w tym folderze projektu; \u201ebuduj” i \u201estartuj”. Uruchamiamy skrypt z poleceniem npm run <scriptname><\/code>, w kt\u00f3rym npm<\/code>zajrzy package.json<\/code>i wykona polecenie zdefiniowane jako jego warto\u015b\u0107. U\u017cywamy narz\u0119dzia wp-scripts<\/code>, kt\u00f3re by\u0142o w pakiecie, kt\u00f3ry w\u0142a\u015bnie zainstalowali\u015bmy, aby albo raz skompilowa\u0107 nasz Javascript (\"build\"<\/code>) albo uruchomi\u0107 tryb \u201ewatch” \/ \u201elisten”, aby kompilowa\u0107 za ka\u017cdym razem, gdy zapisujemy zmiany (\"start\"<\/code>).<\/p>\n
Pozwala nam to r\u00f3wnie\u017c korzysta\u0107 z webpacka WordPress i konfiguracji Babel, wi\u0119c nie musimy tego robi\u0107 sami.<\/p>\n
W folderze projektu utw\u00f3rz podfolder o nazwie src\/<\/code>. Wewn\u0105trz tego folderu utw\u00f3rz index.js<\/code>plik.<\/p>\n
Je\u015bli zgadzasz si\u0119 z domy\u015blnymi ustawieniami webpacka, to ju\u017c koniec! Napisz kod ES6 i JSX w programie index.js<\/code>i powiedz, npm<\/code>aby je skompilowa\u0107, uruchamiaj\u0105c polecenie build:<\/p>\n
npm run build<\/code><\/pre>\n
lub uruchom proces \u201eobserwuj” w terminalu, kt\u00f3ry nas\u0142uchuje zmian wprowadzonych za pomoc\u0105 tego polecenia (u\u017cyj CTRL + C, aby zatrzyma\u0107 proces ogl\u0105dania):<\/p>\n
npm run start<\/code><\/pre>\n
Uruchomienie kt\u00f3regokolwiek z nich spowoduje wygenerowanie build\/<\/code>podfolderu w projekcie bezpo\u015brednio ze skompilowanym wynikiem w programie build\/index.js<\/code>.<\/p>\n
To wszystko dla najbardziej podstawowej konfiguracji \u015brodowiska! Jeste\u015b teraz gotowy do napisania JavaScript ES6 dla Gutenberga!<\/strong><\/p>\n
Je\u015bli chcesz zmieni\u0107 lokalizacj\u0119 i nazwy plik\u00f3w \u017ar\u00f3d\u0142owych lub wyj\u015bciowych, czytaj dalej.<\/p>\n
Konfigurowanie nazw i \u015bcie\u017cek plik\u00f3w \u017ar\u00f3d\u0142owych i wyj\u015bciowych<\/h3>\n
Je\u015bli tak jak ja nie jeste\u015b zadowolony z domy\u015blnej nazwy pliku i struktury \u2013 szczeg\u00f3lnie w przypadku plik\u00f3w wyj\u015bciowych, musisz zastanowi\u0107 si\u0119 nad konfiguracj\u0105 webpacka. Normalnie, na przyk\u0142ad je\u015bli programujesz dla Reacta poza WordPressem, musisz skonfigurowa\u0107 pe\u0142n\u0105 konfiguracj\u0119 webpacka z wtyczk\u0105 Babel. Na szcz\u0119\u015bcie WordPress zajmuje si\u0119 tym za nas i pozwala nam rozszerzy\u0107 w\u0142asn\u0105 konfiguracj\u0119 webpacka WordPressa i dostosowa\u0107 tylko te cz\u0119\u015bci, kt\u00f3re chcemy zmieni\u0107.<\/p>\n
W folderze projektu (tym samym folderze co package.json<\/code>) utw\u00f3rz plik o nazwie webpack.config.js<\/code>i otw\u00f3rz go w swoim edytorze. Napisz w tym pliku:<\/p>\n
const defaultConfig = require(\"@wordpress\/scripts\/config\/webpack.config\");\nconst path = require('path');\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        'block-mynamespace-myblock': '.\/src\/block-mynamespace-myblock.js'\n    },\n    output: {\n        path: path.join(__dirname, '..\/assets\/js\/gutenberg'),\n        filename: '[name].js'\n    }\n}<\/code><\/pre>\n
Pierwsz\u0105 rzecz\u0105, kt\u00f3r\u0105 robimy, jest @wordpress\/scripts<\/code>pobranie konfiguracji pakietu webpack do zmiennej defaultConfig<\/code>. Wewn\u0105trz webpack config module.exports<\/code>, pierwsz\u0105 rzecz\u0105, kt\u00f3r\u0105 robimy, jest zastosowanie wszystkiego defaultConfig<\/code>za pomoc\u0105 operatora rozprzestrzeniania (...<\/code>). Te dwie cz\u0119\u015bci zapewniaj\u0105, \u017ce rozszerzymy konfiguracj\u0119 webpacka WordPressa o wszystko, co si\u0119 w nim znajduje. Po operatorze spreadu mo\u017cemy dostosowa\u0107 lub doda\u0107 dowoln\u0105 w\u0142a\u015bciwo\u015b\u0107, kt\u00f3r\u0105 chcemy zmieni\u0107; w naszym przypadku lokalizacja \u017ar\u00f3d\u0142owa i lokalizacja wyj\u015bciowa.<\/p>\n
W\u0142a\u015bciwo\u015b\u0107 entry<\/code>definiuje pliki \u017ar\u00f3d\u0142owe, czyli domy\u015blnie .\/src\/index.js<\/code>. Ka\u017cdy wpis we entry<\/code>w\u0142a\u015bciwo\u015bci jest par\u0105 klucz+warto\u015b\u0107, z kt\u00f3rej pakiet webpack b\u0119dzie kompilowa\u0142 (i obserwowa\u0142). W powy\u017cszym przyk\u0142adzie zdefiniowa\u0142em ’ block-mynamespace-myblock<\/code>’ src\/block-mynamespace-myblock.js<\/code>jako jeden punkt wej\u015bcia. Tutaj mo\u017cesz doda\u0107 dowoln\u0105 liczb\u0119 par klucz+warto\u015b\u0107 dla ka\u017cdego pliku \u017ar\u00f3d\u0142owego, kt\u00f3ry chcesz skompilowa\u0107.<\/p>\n
W\u0142a\u015bciwo\u015b\u0107 output<\/code>decyduje o lokalizacji skompilowanych plik\u00f3w. W path<\/code>okre\u015blasz folder docelowy dla wszystkich skompilowanych plik\u00f3w. U\u017cywam pomocnika \u015bcie\u017cki, aby m\u00f3c prawid\u0142owo nawigowa\u0107 po katalogach w mojej konfiguracji. W powy\u017cszym przyk\u0142adzie m\u00f3wi\u0119 webpackowi, \u017ce wszystkie skompilowane pliki powinny trafi\u0107 do mojego theme-folder\/assets\/js\/gutenberg\/<\/code>folderu. Wa\u017cn\u0105 rzecz\u0105 jest ..\/<\/code>przechodzenie w g\u00f3r\u0119 w drzewie katalog\u00f3w, z folderu projektu i do innego folderu, w kt\u00f3rym chc\u0119, aby znajdowa\u0142y si\u0119 wszystkie pliki JavaScript mojego motywu. Dostosuj \u015bcie\u017ck\u0119, aby dopasowa\u0107 j\u0105 do struktury projektu.<\/p>\n
Po drugie m\u00f3wi\u0119 webpackowi, \u017ce wszystkie nazwy plik\u00f3w powinny by\u0107 nazwane jako odpowiadaj\u0105ce im entry<\/code>nazwy kluczy. Ten webpack config skompiluje m\u00f3j theme-folder\/gutenberg-dev\/src\/block-mynamespace-myblock.js<\/code>do theme-folder\/assets\/js\/gutenberg\/block-mynamespace-myblock.js<\/code>. Gdybym mia\u0142 doda\u0107 inny plik \u017ar\u00f3d\u0142owy jako par\u0119 klucz+warto\u015b\u0107 w entry<\/code>, zosta\u0142by on skompilowany w tym samym folderze z kluczem jako jego nazw\u0105 pliku.<\/p>\n
Dokonaj \u017c\u0105danych zmian w webpack.config.js<\/code>pliku i zapisz. Uruchom ponownie dowolne npm<\/code>polecenia kompilacji, aby wygenerowa\u0107 pliki w ich nowych lokalizacjach.<\/p>\n
Ot\u00f3\u017c \u200b\u200bto! Rozszerzy\u0142e\u015b konfiguracj\u0119 webpacka WordPressa i teraz kontrolujesz, gdzie powinny znajdowa\u0107 si\u0119 pliki \u017ar\u00f3d\u0142owe i wyj\u015bciowe.<\/strong><\/p>\n
W tym przewodniku chc\u0119 jednak zawrze\u0107 ostatni\u0105 wskaz\u00f3wk\u0119. W domy\u015blnej konfiguracji WordPress dla Babel mo\u017ce brakowa\u0107 niekt\u00f3rych wtyczek Babel dla niekt\u00f3rych nowych funkcji w ESNext. Na przyk\u0142ad z powy\u017cszymi ustawieniami domy\u015blnymi i ustawieniami domy\u015blnymi WordPressa nie b\u0119dziesz m\u00f3g\u0142 u\u017cywa\u0107 funkcji strza\u0142ek w swoim kodzie. Je\u015bli ma to dla ciebie znaczenie, czytaj dalej.<\/p>\n
Dodaj obs\u0142ug\u0119 najnowszych sk\u0142adni ESNext z Babel<\/h3>\n
W chwili pisania tego tekstu domy\u015blna konfiguracja Babel WordPressa nie obs\u0142uguje \u201eeksperymentalnej sk\u0142adni”, kt\u00f3ra obejmuje na przyk\u0142ad funkcje strza\u0142ek. Aby doda\u0107 obs\u0142ug\u0119 tego, musisz dostarczy\u0107 sw\u00f3j plik konfiguracyjny Babel, a jak dot\u0105d nie znalaz\u0142em sposobu na rozszerzenie konfiguracji Babel WordPressa, tak jak to zrobili\u015bmy z konfiguracj\u0105 webpack powy\u017cej. Musimy wi\u0119c przedefiniowa\u0107 ustawienia Babel, a tak\u017ce doda\u0107 wtyczk\u0119 \u201eeksperymentalne sk\u0142adnie”. Ale nie martw si\u0119, to bardzo ma\u0142y plik.<\/p>\n
Pierwszym krokiem jest zainstalowanie niekt\u00f3rych pakiet\u00f3w, kt\u00f3re s\u0105 nam potrzebne do predefiniowanych ustawie\u0144 Babel \u2013 musimy zainstalowa\u0107 te same, kt\u00f3re zosta\u0142y zdefiniowane w konfiguracji Babel WordPressa. Uruchom to polecenie, aby zainstalowa\u0107 @babel\/preset-env<\/code>i @babel\/preset-react<\/code>, a tak\u017ce pakiet, kt\u00f3ry nas interesuje; @babel\/plugin-proposal-class-properties<\/code>:<\/p>\n
npm install --save-dev @babel\/preset-env @babel\/preset-react @babel\/plugin-proposal-class-properties<\/code><\/pre>\n
Drugim krokiem jest dodanie pliku konfiguracyjnego Babel. W folderze projektu utw\u00f3rz plik o nazwie .babelrc<\/code>(bez rozszerzenia pliku).<\/p>\n
Uwaga dla systemu Windows: Je\u015bli siedzisz na komputerze z systemem Windows, nie mo\u017cesz tworzy\u0107 plik\u00f3w bez rozszerze\u0144 plik\u00f3w. Aby obej\u015b\u0107 ten problem, mo\u017cesz utworzy\u0107 ten plik za pomoc\u0105 terminala \/ wiersza polece\u0144. Uruchom to polecenie:<\/p>\n
echo hi > .babelrc<\/code><\/pre>\n
To polecenie wygeneruje \u201ehi” do pliku .babelrc<\/code>w bie\u017c\u0105cym folderze. Mo\u017cesz teraz otworzy\u0107 ten plik w swoim edytorze, usun\u0105\u0107 \u201ecze\u015b\u0107” i doda\u0107 rzeczywist\u0105 zawarto\u015b\u0107 poni\u017cej.<\/p>\n
.babelrc<\/code>Powiniene\u015b wygl\u0105da\u0107 mniej wi\u0119cej tak :<\/p>\n
{\n    \"presets\": [\"@babel\/preset-env\", \"@babel\/preset-react\"],\n    \"plugins\": [\n        [\n            \"@babel\/plugin-proposal-class-properties\"\n        ]\n    ]\n}<\/code><\/pre>\n
Definiujemy te same ustawienia wst\u0119pne, kt\u00f3re normalnie robisz w projekcie React i tak samo, jak robi to WordPress. To, co dodajemy, to plugins<\/code>w\u0142asno\u015b\u0107. Wewn\u0105trz tablicy plugins<\/code>dodajemy @babel\/plugin-proposal-class-properties<\/code>niezb\u0119dn\u0105 wtyczk\u0119 Babel do \u201eeksperymentalnych sk\u0142adni”, takich jak funkcje strza\u0142ek.<\/p>\n
Wniosek<\/h2>\n
Pami\u0119taj, \u017ce WordPress mo\u017ce zmieni\u0107 swoj\u0105 konfiguracj\u0119 w dowolnym momencie, jest to szczeg\u00f3lnie prawdopodobne, poniewa\u017c Gutenberg jest do\u015b\u0107 nowy. Poniewa\u017c rozszerzamy konfiguracj\u0119 WordPressa, by\u0107 mo\u017ce w pewnym momencie b\u0119dziemy musieli ponownie zaktualizowa\u0107 nasz\u0105 konfiguracj\u0119, aby dopasowa\u0107 j\u0105 do naszych potrzeb. By\u0107 mo\u017ce WordPress zdecyduje si\u0119 na w\u0142\u0105czenie obs\u0142ugi sk\u0142adni eksperymentalnych, aby\u015bmy nie musieli wykonywa\u0107 ca\u0142ej konfiguracji Babel.<\/p>\n
W \u017cadnym wypadku nie jest to wyczerpuj\u0105cy przewodnik po konfigurowaniu Webpack i Babel, ale jest wynikiem wielu eksperyment\u00f3w i odkrywania rzeczy. Mam nadziej\u0119, \u017ce pomog\u0142o ci to w nauczeniu si\u0119, jak skonfigurowa\u0107 w\u0142asne \u015brodowisko programistyczne Gutenberg i uczyni\u0142o to wystarczaj\u0105co \u0142atwym, wi\u0119c nie jest to tak du\u017ca przeszkoda w rozpocz\u0119ciu nauki ES6, ESNext, JSX i wszystkich innych dobrych rzeczy, kt\u00f3re s\u0105 korzystne dla programowania dla Gutenbergu!<\/p>\n
\u0179r\u00f3d\u0142o nagrywania:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Jest to kompletny przewodnik, jak skonfigurowa\u0107 npm, webpack i babel w celu pisania kodu dla Gutenberga za pomoc\u0105 sk\u0142adni ES6, ESNext i JSX.<\/p>\n","protected":false},"author":1,"featured_media":151834,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[940,940,919,919,1110,815,836,836,845,845,866,866,815],"tags":[1169],"class_list":["post-233880","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-7","category-inny","category-n-a","category-wtyczki","category-przewodnik-dla-poczatkujacych","category-samouczki","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=233880"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233880\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/151834"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233880"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233880"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}