{"id":233828,"date":"2023-02-24T19:03:00","date_gmt":"2023-02-24T16:03:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233828"},"modified":"2022-11-11T12:40:37","modified_gmt":"2022-11-11T09:40:37","slug":"komplett-guide-foer-att-skapa-en-utvecklingsmiljoe-foer-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/komplett-guide-foer-att-skapa-en-utvecklingsmiljoe-foer-gutenberg\/","title":{"rendered":"Komplett guide f\u00f6r att skapa en utvecklingsmilj\u00f6 f\u00f6r Gutenberg"},"content":{"rendered":"\n

Den h\u00e4r guiden \u00e4r till f\u00f6r dig som vill skriva kod f\u00f6r Gutenberg med syntaxerna ES6, ESNext och JSX, och beh\u00f6ver s\u00e4tta upp webpack och babel f\u00f6r att omvandla dessa till filer du kan anv\u00e4nda i Gutenberg-editorn. Vi kommer att titta p\u00e5 vad du beh\u00f6ver g\u00f6ra, varf\u00f6r och hur vi kan anv\u00e4nda och ut\u00f6ka standardinst\u00e4llningarna fr\u00e5n WordPress och anpassa dem f\u00f6r att passa v\u00e5ra behov.<\/p>\n

Om du \u00e4r helt ny p\u00e5 hela npm, webpcak och Babel-koncepten b\u00f6r du l\u00e4sa f\u00f6ljande avsnitt som syftar till att f\u00f6rklara grunderna f\u00f6r hur dessa verktyg fungerar och hur du anv\u00e4nder dem. Men om du har gjort detta tidigare och \u00e4r bekant med processen, kanske genom att utveckla med React, hoppa vidare till n\u00e4sta avsnitt d\u00e4r vi faktiskt ska st\u00e4lla in saker och ting.<\/p>\n

F\u00f6r nyb\u00f6rjare: npm, webpack och babel<\/h2>\n

Om du \u00e4r os\u00e4ker p\u00e5 varf\u00f6r vi beh\u00f6ver g\u00f6ra allt detta f\u00f6r att skriva Javascript f\u00f6r Gutenberg, rekommenderar jag att du l\u00e4ser mitt inl\u00e4gg<\/a> som utforskar grunderna f\u00f6r att utveckla f\u00f6r Gutenberg \u2013 d\u00e4r jag f\u00f6rklarar skillnaden i Javascript-versioner och varf\u00f6r det \u00e4r v\u00e4rt besv\u00e4ret.<\/p>\n

Om du aldrig har gjort detta f\u00f6rut m\u00e5ste du f\u00f6rst installera Node.js<\/a> p\u00e5 din dator. Klicka p\u00e5 l\u00e4nken, ladda ner och installera den. Inkluderat i Node.js f\u00e5r du ett verktyg som vi kommer att anv\u00e4nda f\u00f6r att st\u00e4lla in det mesta av konfigurationen. Detta verktyg \u00e4r npm<\/code>, som l\u00e5ter dig installera Javascript-bibliotek och k\u00f6ra skript via kommandoraden\/terminalen. Du kan alternativt anv\u00e4nda yarn<\/code>om du f\u00f6redrar det, men f\u00f6r den h\u00e4r guiden kommer vi att anv\u00e4nda npm<\/code>.<\/p>\n

npm<\/h3>\n

Den h\u00e4r guiden kommer inte att g\u00e5 in i detalj om alla saker du kan g\u00f6ra med npm<\/code>, men den kommer att f\u00f6rklara det grundl\u00e4ggande konceptet f\u00f6r det och saker som \u00e4r relevanta f\u00f6r v\u00e5ra syften. Vi kommer att anv\u00e4nda npm<\/code>f\u00f6r tv\u00e5 saker; f\u00f6r att installera n\u00f6dv\u00e4ndiga bibliotek i v\u00e5rt projekt och f\u00f6r att k\u00f6ra kommandon f\u00f6r att bygga (kompilera) v\u00e5ra Javascript-filer.<\/p>\n

Med npm<\/code>kan du installera alla offentliga Javascript-paket med \u00f6ppen k\u00e4llkod. Om vi \u200b\u200bskulle utveckla med React (utanf\u00f6r WordPress) skulle vi beh\u00f6va installera React-bibliotek och webpack-bibliotek. WordPress erbjuder en hel rad bibliotek (fr\u00e4mst f\u00f6r Gutenberg) som du kan installera, men vi \u00e4r egentligen bara intresserade av ett: @wordpress\/scripts<\/code>\u2013 vilket hj\u00e4lper oss att f\u00f6renkla v\u00e5r konfiguration.<\/p>\n

N\u00e4rhelst du installerar ett bibliotek, npm<\/code>skapas en undermapp " node_modules<\/code>" d\u00e4r de installerade biblioteken lagras. Du beh\u00f6ver aldrig g\u00e5 in i den h\u00e4r mappen eller \u00e4ndra n\u00e5got h\u00e4r, men kom ih\u00e5g att den h\u00e4r mappen l\u00e4tt kommer att inneh\u00e5lla (bokstavligen!) tiotusentals filer. Detta \u00e4r en mapp som du aldrig b\u00f6r f\u00f6rbinda dig till git eller inkludera i n\u00e5got f\u00e4rdigt tema eller plugin. Biblioteken beh\u00f6vs bara under utveckling.<\/p>\n

N\u00e4r din milj\u00f6 \u00e4r inst\u00e4lld kan du anv\u00e4nda npm<\/code>f\u00f6r att k\u00f6ra skript definierade i din package.json<\/code>fil. Beroende p\u00e5 projektet skulle du normalt ha minst tv\u00e5 skript; en f\u00f6r att bygga skripten och en f\u00f6r att starta "bevakningsl\u00e4ge". I "bevakningsl\u00e4ge" npm<\/code>startar en process i terminalen som v\u00e4ntar och lyssnar p\u00e5 \u00e4ndringar som g\u00f6rs i valfri fil, och kompilerar dem vid k\u00f6rning n\u00e4r du trycker p\u00e5 spara. Du kanske \u00e4r bekant med detta koncept om du har anv\u00e4nt SCSS eller LESS kompilatorprogram tidigare. Det \u00e4r mycket effektivare att k\u00f6ra ett "watch"-skript i bakgrunden som kompileras om varje g\u00e5ng du sparar, ist\u00e4llet f\u00f6r att g\u00e5 till terminalen och k\u00f6ra byggkommandot efter varje \u00e4ndring.<\/p>\n

webpack och babel<\/h3>\n

Du kan f\u00e5 genom att utveckla f\u00f6r Gutenberg utan att g\u00f6ra n\u00e5gon webbpack eller babel-konfiguration. Eftersom vi anv\u00e4nder WordPress bibliotek kommer de att hantera det \u00e5t oss. Detta har dock en nackdel – det har som standard en fast plats och filnamn f\u00f6r b\u00e5de dina k\u00e4ll- och utdatafiler. Hela din Javascript-utveckling m\u00e5ste skrivas i en fil, i project-folder\/src\/index.js<\/code>, och bygget kommer alltid att hamna i project-folder\/build\/index.js<\/code>. Om du \u00e4r bra med detta kan du hoppa \u00f6ver hela delen om webbpaketkonfiguration. Men om du utvecklar ett tema eller plugin med flera Gutenberg-funktioner (anpassade block, filter, etc) kanske du \u00e5tminstone vill ha ett annat utdatafilnamn och plats samt till\u00e5ta flera filer.<\/p>\n

Om du anv\u00e4nder WordPress paket f\u00f6r att hantera installationen (@wordpress\/scripts<\/code>), \u00e4r Babel redan konfigurerat. Men du b\u00f6r vara medveten om att WordPress-paketet kanske inte inneh\u00e5ller plugins som du kanske vill anv\u00e4nda. Det finns till exempel ett paket som l\u00e5ter dig anv\u00e4nda de nya s\u00e5 kallade "pilfunktionerna" (myFunction = (param) => { }<\/code>), f\u00f6r att definiera funktioner utan att beh\u00f6va binda this<\/code>. Om du absolut vill anv\u00e4nda dessa ESNext-funktioner m\u00e5ste du konfigurera Babel sj\u00e4lv ist\u00e4llet f\u00f6r att anv\u00e4nda WordPresss standardinst\u00e4llningar. Jag ska g\u00e5 igenom hur nedan.<\/p>\n

Processen<\/h3>\n

Processen att utveckla med webpack n\u00e4r allt \u00e4r konfigurerat och installerat, \u00e4r att navigera till din projektmapp i terminalen och starta "watch"-skriptet. Den f\u00f6rblir \u00f6ppen och lyssnar p\u00e5 \u00e4ndringar som g\u00f6rs i dina JS-filer. N\u00e4r du trycker p\u00e5 spara i dina Javascript-filer kommer terminalen att mata ut information (f\u00f6rhoppningsvis) om att den framg\u00e5ngsrikt har kompilerat om filen. Om det fanns n\u00e5gra kompileringsfel kommer de att visas i terminalen. F\u00f6r att stoppa "bevakning"-processen, tryck CTRL + C.<\/p>\n

Att s\u00e4tta upp milj\u00f6n<\/h2>\n

Jag antar att du redan har en lokal WordPress som k\u00f6rs p\u00e5 n\u00e5gon LAMP-stack (program som WampServer, XAMPP, Docker eller liknande), och att du har antingen ett plugin eller tema redo att b\u00f6rja koda ditt Javascript i.<\/p>\n

Jag rekommenderar att du skapar en undermapp dedikerad f\u00f6r din Javascript-utveckling eftersom du kan f\u00e5 flera konfigurationsfiler och mappar. Detta g\u00f6r det enklare att separera filer och mappar (till exempel node_modules\/<\/code>) som du inte vill inkludera i git-commits eller final builds. Men det g\u00e5r alldeles utm\u00e4rkt att anv\u00e4nda ditt huvudtema eller plugin-mapp som projektmapp f\u00f6r Javascript-utveckling.<\/p>\n

I terminal (Mac OS-terminal eller Windows Kommandotolk fungerar b\u00e5da bra) navigera till din projektmapp. N\u00e4r det g\u00e4ller denna handledning antar jag att vi \u00e4r i ett tema och har skapat en tom undermapp gutenberg-dev\/<\/code>som v\u00e5r projektmapp.<\/p>\n

Det f\u00f6rsta steget \u00e4r att initiera ett npm-projekt \u2013 vilket i princip bara s\u00e4ger npm<\/code>att man ska generera en package.json<\/code>fil. Den h\u00e4r package.json<\/code>filen informerar npm<\/code>om vilka paket som kr\u00e4vs och vilka skript som \u00e4r tillg\u00e4ngliga f\u00f6r k\u00f6rning. Skriv detta i terminal;<\/p>\n

npm init -y<\/code><\/pre>\n
Detta genererar en package.json<\/code>fil med standardinneh\u00e5ll i din projektmapp.<\/p>\n
D\u00e4refter installerar vi WordPress-paketet som hj\u00e4lper oss att minska m\u00e4ngden konfiguration vi beh\u00f6ver g\u00f6ra. K\u00f6r detta kommando:<\/p>\n
npm install --save-dev --save-exact @wordpress\/scripts<\/code><\/pre>\n
Taggen --save-dev<\/code>informerar npm<\/code>om att de givna biblioteken bara \u00e4r n\u00f6dv\u00e4ndiga f\u00f6r utveckling och --save-exact<\/code>ser till att npm<\/code>bara en version installeras, den senaste.<\/p>\n
\u00d6ppna package.json<\/code>filen i din editor. (npm<\/code>kommer ocks\u00e5 att ha genererat en package-lock.json<\/code>vid installation av paket, du kan bara ignorera den h\u00e4r filen, det \u00e4r package.json<\/code>du som g\u00f6r \u00e4ndringar i). Den b\u00f6r vara fylld med standardkonfiguration, och du kanske m\u00e4rker att paketinstallationen vi gjorde tidigare lade till en post @wordpress\/scripts<\/code>av en viss version i devDependencies<\/code>. N\u00e4r du kommer att installera fler paket, npm<\/code>kommer att uppdateras package.json<\/code>med poster f\u00f6r varje paket. Allt vi beh\u00f6ver t\u00e4nka p\u00e5 i den h\u00e4r filen \u00e4r scripts<\/code>egenskapen, som \u00e4r till f\u00f6r skript (kommandon) som du kan anv\u00e4nda npm<\/code>f\u00f6r att k\u00f6ra. Uppdatera skriptegenskapen till detta (du kan ta bort standardtestet):<\/p>\n
\"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\"\n},<\/code><\/pre>\n
Denna kodbit ber\u00e4ttar npm<\/code>att vi har tv\u00e5 skript vi kan k\u00f6ra i den h\u00e4r projektmappen; "bygga" och "starta". Vi k\u00f6r ett skript med kommandot npm run <scriptname><\/code>, som npm<\/code>kommer att titta in package.json<\/code>och utf\u00f6ra kommandot definierat som dess v\u00e4rde. Vi anv\u00e4nder verktyget wp-scripts<\/code>som kom i paketet vi installerade nyss f\u00f6r att antingen kompilera v\u00e5rt Javascript en g\u00e5ng (\"build\"<\/code>) eller starta "titta" \/ "lyssna"-l\u00e4ge f\u00f6r att kompilera n\u00e4r vi sparar \u00e4ndringar (\"start\"<\/code>).<\/p>\n
Detta g\u00f6r att vi ocks\u00e5 kan anv\u00e4nda WordPress webbpaket och Babel-konfiguration, s\u00e5 vi beh\u00f6ver inte g\u00f6ra det sj\u00e4lva.<\/p>\n
Skapa en undermapp som heter src\/<\/code>. Skapa en index.js<\/code>fil i den h\u00e4r mappen.<\/p>\n
Om du \u00e4r bra med webbpaketets standardinst\u00e4llningar \u00e4r du nu klar! Skriv din ES6- och JSX-kod i index.js<\/code>, och be om npm<\/code>att kompilera dem genom att antingen k\u00f6ra byggkommandot:<\/p>\n
npm run build<\/code><\/pre>\n
eller starta en "bevakningsprocess" i terminalen som lyssnar p\u00e5 \u00e4ndringar gjorda med det h\u00e4r kommandot (anv\u00e4nd CTRL+C f\u00f6r att stoppa bevakningsprocessen):<\/p>\n
npm run start<\/code><\/pre>\n
Att k\u00f6ra n\u00e5gon av dessa kommer att generera en build\/<\/code>undermapp i din projektkatalog med det kompilerade resultatet i build\/index.js<\/code>.<\/p>\n
Det \u00e4r allt f\u00f6r den mest grundl\u00e4ggande milj\u00f6inst\u00e4llningen! Du \u00e4r nu redo att skriva ES6 Javascript f\u00f6r Gutenberg!<\/strong><\/p>\n
Om du vill \u00e4ndra platsen och filnamnen f\u00f6r dina k\u00e4ll- eller utdatafiler, l\u00e4s vidare.<\/p>\n
Konfigurera k\u00e4ll- och utdatafilnamn och s\u00f6kv\u00e4gar<\/h3>\n
Om du, som jag, inte \u00e4r n\u00f6jd med standardfilnamnet och -strukturen \u2013 speciellt f\u00f6r utdatafilen\/filerna, m\u00e5ste du unders\u00f6ka hur du konfigurerar webpack. Normalt, om du till exempel utvecklade f\u00f6r React utanf\u00f6r WordPress, skulle du beh\u00f6va konfigurera en fullst\u00e4ndig webbpaketkonfiguration med Babel-plugin. Som tur \u00e4r tar WordPress hand om detta \u00e5t oss och l\u00e5ter oss ut\u00f6ka WordPresss egna webbpaketkonfiguration och justera bara de delar vi vill \u00e4ndra.<\/p>\n
package.json<\/code>Skapa en fil med namnet i din projektmapp (samma mapp som) webpack.config.js<\/code>och \u00f6ppna den i din editor. Skriv f\u00f6ljande i denna fil:<\/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
Det f\u00f6rsta vi g\u00f6r \u00e4r att h\u00e4mta @wordpress\/scripts<\/code>webbpaketets konfiguration till variabeln defaultConfig<\/code>. Inuti webpack-konfigurationen module.exports<\/code>\u00e4r det f\u00f6rsta vi g\u00f6r att applicera allt defaultConfig<\/code>genom att anv\u00e4nda spread-operatorn (...<\/code>). Dessa tv\u00e5 delar ser till att vi ut\u00f6kar WordPress webbpaketkonfiguration genom att inkludera allt i den. Efter spridningsoperatorn kan vi justera eller l\u00e4gga till vilken egenskap vi vill \u00e4ndra; i v\u00e5rt fall k\u00e4llplatsen och utg\u00e5ngsplatsen.<\/p>\n
Egenskapen entry<\/code>definierar k\u00e4llfilerna, vilket \u00e4r som standard .\/src\/index.js<\/code>. Varje post i entry<\/code>egenskapen \u00e4r ett nyckel+v\u00e4rdepar som webpack kommer att kompilera (och titta p\u00e5) fr\u00e5n. I exemplet ovan har jag definierat ’ block-mynamespace-myblock<\/code>’ som ligger i src\/block-mynamespace-myblock.js<\/code>som en ing\u00e5ngspunkt. Du kan l\u00e4gga till s\u00e5 m\u00e5nga nyckel+v\u00e4rdepar h\u00e4r f\u00f6r varje k\u00e4llfil du vill kompilera.<\/p>\n
Egenskapen output<\/code>best\u00e4mmer platsen f\u00f6r kompilerade filer. I path<\/code>definierar du m\u00e5lmappen f\u00f6r alla kompilerade filer. Jag anv\u00e4nder en s\u00f6kv\u00e4gshj\u00e4lp f\u00f6r att kunna navigera korrekt i kataloger i min konfiguration. I exemplet ovan s\u00e4ger jag till webpack att alla kompilerade filer ska hamna i min theme-folder\/assets\/js\/gutenberg\/<\/code>mapp. Det viktiga \u00e4r att anv\u00e4nda ..\/<\/code>f\u00f6r att g\u00e5 upp i katalogtr\u00e4det, ut ur projektmappen och till en annan mapp d\u00e4r jag vill att alla mitt temas Javascript-filer ska finnas. Justera banan s\u00e5 att den passar din projektstruktur.<\/p>\n
F\u00f6r det andra s\u00e4ger jag till webpack att alla filnamn ska namnges som deras motsvarande entry<\/code>nyckelnamn. Den h\u00e4r webbpaketkonfigurationen kommer att kompilera min theme-folder\/gutenberg-dev\/src\/block-mynamespace-myblock.js<\/code>till theme-folder\/assets\/js\/gutenberg\/block-mynamespace-myblock.js<\/code>. Om jag skulle l\u00e4gga till ytterligare en k\u00e4llfil som nyckel+v\u00e4rdepar i entry<\/code>, skulle den kompileras till samma mapp med nyckeln som filnamn.<\/p>\n
G\u00f6r \u00f6nskade justeringar i din webpack.config.js<\/code>fil och spara. K\u00f6r n\u00e5got av npm<\/code>byggkommandona igen f\u00f6r att generera filer p\u00e5 deras nya platser.<\/p>\n
Det \u00e4r allt! Du har nu ut\u00f6kat WordPress webbpaketkonfiguration och du styr nu var din k\u00e4llkod och dina utdatafiler ska hamna.<\/strong><\/p>\n
Men jag vill ta med ett sista tips i den h\u00e4r guiden. WordPress standardkonfiguration f\u00f6r Babel kan sakna vissa Babel-plugins f\u00f6r vissa nya funktioner i ESNext. Till exempel med ovanst\u00e5ende standard och WordPresss standardv\u00e4rden kommer du inte att kunna anv\u00e4nda pilfunktioner i din kod. Om detta \u00e4r viktigt f\u00f6r dig, l\u00e4s vidare.<\/p>\n
L\u00e4gg till st\u00f6d f\u00f6r de senaste ESNext-syntaxerna med Babel<\/h3>\n
I skrivande stund saknar WordPresss standard-Babel-inst\u00e4llning st\u00f6d f\u00f6r "experimentella syntaxer", som inkluderar till exempel pilfunktioner. F\u00f6r att l\u00e4gga till st\u00f6d f\u00f6r detta m\u00e5ste du tillhandah\u00e5lla din Babel-konfigurationsfil, och \u00e4n s\u00e5 l\u00e4nge har jag inte hittat n\u00e5got s\u00e4tt att ut\u00f6ka WordPress Babel-konfiguration som vi gjorde med webpack-konfigurationen ovan. S\u00e5 vi m\u00e5ste omdefiniera Babel-f\u00f6rinst\u00e4llningar samt l\u00e4gga till pluginet "experimentella syntaxer". Men oroa dig inte, det \u00e4r en v\u00e4ldigt liten fil.<\/p>\n
Det f\u00f6rsta steget \u00e4r att installera n\u00e5gra paket som vi beh\u00f6ver f\u00f6r Babel-f\u00f6rinst\u00e4llningar \u2013 vi m\u00e5ste installera samma som definierats i WordPress Babel-konfiguration. K\u00f6r det h\u00e4r kommandot f\u00f6r att installera @babel\/preset-env<\/code>och @babel\/preset-react<\/code>, samt paketet vi \u00e4r intresserade av; @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
Det andra steget \u00e4r att l\u00e4gga till Babels konfigurationsfil. .babelrc<\/code>Skapa en fil med namnet (ingen filtill\u00e4gg) i din projektmapp .<\/p>\n
Notera f\u00f6r Windows: Om du sitter p\u00e5 en Windows-maskin f\u00e5r du inte skapa filer utan filtill\u00e4gg. F\u00f6r att g\u00e5 runt detta kan du skapa den h\u00e4r filen med terminal\/kommandotolk. K\u00f6r detta kommando:<\/p>\n
echo hi > .babelrc<\/code><\/pre>\n
Detta kommando kommer att mata ut "hej" i filen .babelrc<\/code>i den aktuella mappen. Du kan nu \u00f6ppna den h\u00e4r filen i din editor, ta bort "hej" och l\u00e4gga till det faktiska inneh\u00e5llet nedan.<\/p>\n
Du .babelrc<\/code>borde se ut ungef\u00e4r s\u00e5 h\u00e4r:<\/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
Vi definierar samma f\u00f6rinst\u00e4llningar som du normalt skulle g\u00f6ra i ett React-projekt, och samma som WordPress g\u00f6r det. Det vi l\u00e4gger till \u00e4r plugins<\/code>fastigheten. Inuti arrayen plugins<\/code>l\u00e4gger vi till den @babel\/plugin-proposal-class-properties<\/code>som \u00e4r den n\u00f6dv\u00e4ndiga Babel-plugin f\u00f6r "experimentella syntaxer" som pilfunktioner.<\/p>\n
Slutsats<\/h2>\n
T\u00e4nk p\u00e5 att WordPress kan \u00e4ndra sin konfiguration n\u00e4r som helst, det \u00e4r s\u00e4rskilt troligt att detta h\u00e4nder eftersom Gutenberg \u00e4r ganska ny. Eftersom vi ut\u00f6kar WordPress konfiguration kan vi vid ett tillf\u00e4lle beh\u00f6va uppdatera v\u00e5r konfiguration igen f\u00f6r att passa v\u00e5ra behov. Kanske v\u00e4ljer WordPress att inkludera st\u00f6d f\u00f6r experimentella syntaxer s\u00e5 att vi inte beh\u00f6ver g\u00f6ra hela Babel-konfigurationen.<\/p>\n
Detta \u00e4r inte p\u00e5 n\u00e5got s\u00e4tt en utt\u00f6mmande guide f\u00f6r att st\u00e4lla in Webpack och Babel, utan resultatet av en hel del experimenterande och klurande av saker. Jag hoppas att detta har hj\u00e4lpt dig att l\u00e4ra dig hur du s\u00e4tter upp din egen Gutenberg-utvecklingsmilj\u00f6 och gjort det enkelt nog s\u00e5 att detta inte \u00e4r ett s\u00e5 stort hinder f\u00f6r att b\u00f6rja l\u00e4ra dig ES6, ESNext, JSX och allt det d\u00e4r bra som \u00e4r bra f\u00f6r utveckling f\u00f6r Gutenberg!<\/p>\n
Inspelningsk\u00e4lla:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Detta \u00e4r en komplett guide i hur man st\u00e4ller in npm, webpack och babel f\u00f6r att skriva kod f\u00f6r Gutenberg med syntaxerna ES6, ESNext och 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":[838,942,942,848,922,1110,922,818,818,838,848,868,868],"tags":[1173],"class_list":["post-233828","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide-foer-nyboerjare","category-gutenberg-9","category-handledningar","category-oevrig","category-n-a","category-plugins-3","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233828"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233828\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/151834"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}