Co jsou NPM, příze, babely a webpacky; a jak je správně používat?

Většina z nás, kteří se dostali do vytváření interaktivních webových aplikací, začala stavět normální webové stránky pomocí knihoven, jako je jQuery. Když postupujeme vpřed k zahájení našeho dobrodružství, setkáváme se nejprve s těmito čtyřmi technologiemi. Nastavení projektu React se stává bolestivým zážitkem.

V tomto článku se pokusíme tuto bolestivou zkušenost zmírnit vysvětlením těchto technologií jeden po druhém a jak spolu pracují.

NPM a příze

Tyto dvě technologie řeší přesně stejný problém. Aby byl konkrétnější, je příze superset NPM, který řeší mnoho problémů, které NPM má. K čemu jsou?

NPM je zkratka pro Node Package Manager. To je to, co jeho název popisuje. Jedná se o správce balíčků pro prostředí založená na uzlech. Sleduje všechny balíčky a jejich verze a umožňuje vývojářům snadno tyto závislosti aktualizovat nebo odstranit. Všechny tyto externí závislosti jsou uloženy v souboru zvaném package.json. Počáteční soubor lze snadno vytvořit pomocí CLI npm init (za předpokladu, že je v systému nainstalován NodeJS). Při instalaci balíčku pomocí NPM se balíčky stáhnou z vyhrazeného registru. Existuje mnoho funkcí NPM, jako je publikování. Pokud se chcete dozvědět více o NPM, podívejte se na odkazy dole.

Každý jazyk, který používáme, má nějakou formu správce balíků, buď oficiální, nebo třetí strany. PHP má Composer, Python má PyPi, Java má Gradle atd.

Nyní si povíme krátce o Yarn. Jedná se o správce balíků, který používá jako backend registr NPM. Příze má oproti NPM dvě hlavní výhody. Za prvé, Yarn vytvoří soubor příze.lock. Tento soubor ukládá přesné verze závislostí na poslední číslici. Při instalaci Yarn nejprve zkontroluje soubor zámku pro verze, poté zkontroluje soubor package.json. NPM má příkaz shrinkwrap, který to přesně dělá. Při instalaci / aktualizaci závislostí však příze automaticky vytvoří a aktualizuje svůj uzamykací soubor. Za druhé, příze je velmi rychlá. Při instalaci závislostí pro projekt NPM nainstaluje balíčky postupně. Tím se výrazně zpomalí výkon. Příze tento problém řeší paralelní instalací těchto balíčků.

To je prozatím pro NPM a Yarn.

Babel

Jako jakýkoli jazyk má Javascript také verze s názvem ECMAScript (zkratka pro ES). V současné době většina prohlížečů podporuje ES5. ES5 bývala dobrá, i když bylo pro ni bolestivé kódovat. Pamatujete si, že to není čtení z funkcí zpětného volání? Nová verze Javascriptu, ES6, známá také jako ES2015 (specifikace jazyka byly dokončeny v červnu 2015) činí Javascript opět skvělým. Pokud se chcete dozvědět více o ES6, podívejte se na odkazy na konci tohoto článku. Všechny skvělé vlastnosti ES6 přicházejí s jedním velkým problémem - většina prohlížečů je plně nepodporuje. To je, když Babel přijde hrát. Babel je transformátor JS, který převádí nový kód JS na staré. Jedná se o velmi flexibilní nástroj, pokud jde o transplantaci. Lze snadno přidat předvolby jako es2015, es2016, es2017, takže je Babel zkompiluje do ES5.

Zde je příklad - kód napsaný v ES6:

třída test {
  countPowers () {
    návrat [1,2,3] .map (n => n ** 2);
  }
}

Babel převede tento kód na následující, vzhledem k předvolbám es2015:

„používat přísně“;
var _createClass = function () {function defineProperties (target, props) {for (var i = 0; i 
function _classCallCheck (instance, Constructor) {if (! (instance instance Constructor)) {throw new TypeError ("Nelze volat třídu jako funkci"); }}
var Test = function () {
  funkční test() {
    _classCallCheck (toto, Test);
  }
_createClass (Test, [{
    key: "countPowers",
    value: function calculationPowers () {
      return [1, 2, 3] .map (funkce (n) {
        návrat Math.pow (n, 2);
      });
    }
  }]);
návratový test;
} ();

Toto je příklad toho, jak nám Babel umožňuje mít čistý, udržovatelný kód s využitím nejnovějších specifikací JS, aniž bychom se museli starat o podporu prohlížeče.

Webpack

Nyní, když víme, co jsou Babel a ES6 / 7, bychom to chtěli použít. Rádi bychom také použili SASS pro naše styly, PostCSS pro automatické opravy. Navíc bychom chtěli minifikovat a zkreslit kód CSS i Javascript. Webpack řeší všechny tyto problémy pomocí jednoho konfiguračního souboru (nazvaného webpack.config.js) a jednoho příkazového webového balíčku CLI.

Webpack je modulární nástroj pro sestavení, který má dvě sady funkcí - Loaders and Plugins. Nakladače transformují zdrojový kód modulu. Například zavaděč stylů přidá CSS do DOM pomocí značek stylu. sass-loader kompiluje SASS soubory do CSS. babel-loader transponuje JS kód s ohledem na předvolby. Pluginy jsou jádrem Webpacku. Mohou dělat věci, které nakladače nemohou. Například existuje plugin s názvem UglifyJS, který minimalizuje a uklidňuje výstup webpacku.

Dává je dohromady

Nyní víme, jaké jsou koncepty, vytvořme jednoduchou aplikaci Hello World pomocí Babel, SASS, Webpack, Yarn a React. Tato aplikace bude zobrazovat Hello World zevnitř komponenty React. Nemluvil jsem o React, ale následující toolchain se v aplikacích React hodně používá; Proto jsem se rozhodl ukázat tento příklad pomocí React.

Za prvé, pojďme instalovat přízi globálně. Pokud používáte linuxový systém a máte nainstalovaný NodeJS, napište

sudo npm instalace -g příze

Pokud používáte MacOS a máte nainstalované NodeJS a Homebrew, zadejte

vařit instalaci příze

Nyní, když máme nainstalovanou přízi, jdeme do našeho pracovního adresáře. Jakmile jsme v našem pracovním adresáři (moje je ~ / example-rea-app), napište inicializaci příze. Pokud zkontrolujete svůj adresář, uvidíte, že je vytvořen soubor package.json.

Je čas nainstalovat všechny závislosti. Musíme se rozhodnout, co pro náš projekt potřebujeme - Webpack, Babel, syntaxe Babel JSX, Babel ES2015, SASS a všechny potřebné nakladače pro webpack:

příze přidat - dev webpack babel-core babel-loader babel-preset-reagovat babel-preset-es2015 uzel-sass css-loader sass-loader style-loader

Potřebujeme také React:

příze přidat reakci rea-dom

Možná se zeptáte, proč jsme přidali příznak --dev pro závislosti na webpacku. Po instalaci obou z nich, pokud zkontrolujete soubor package.json, uvidíte, že ty nainstalované s příznakem --dev jsou v poli devDependencies, zatímco ty bez jsou v poli závislostí. Pokud tento projekt nainstalujete do produkčního prostředí, nainstaluje se pouze pole nezávislostí balíčků.

Po instalaci závislostí vytvoříme naši ukázkovou aplikaci. Struktura aplikace bude vypadat takto:

src /
   /index.jsx
   /index.html
   / komponenty
       /HelloWorld.jsx
   / styly
       /app.scss
       / komponenty
           /hello-world.scss

Do src / components / HelloWorld.jsx přidejte následující kód:

importovat React, {Component} z 'reagovat';
exportní třída HelloWorld rozšiřuje komponentu {
    poskytnout() {
        vrátit se (
            
                

Ahoj svět

            
        );     }
}
export výchozí HelloWorld;

V src / index.jsx budeme zahrnovat komponentu HelloWorld a vykreslíme ji. Zahrneme také náš styl sass:

import Reagovat z 'reagovat';
importovat ReactDOM z 'Reagovat';
importujte HelloWorld z './components/HelloWorld';
import './styles/app.scss';
ReactDOM.render (
   ,
   document.getElementById ('app')
);

Do src / styles / app.scss zahrneme komponenty / hello-world.scss:

@import 'components / hello-world';

V src / styly / komponenty / hello-world.scss změňte barvu kontejneru hello world na červenou:

.Ahoj světe {
    červená barva;
}

src / index.html načte soubor balíčku:




   
    Příklad React App 


   
   

Nyní, když jsme přidali celou strukturu aplikace, musíme Webpack nastavit. Nejprve vytvoříme webpack.config.js v kořenovém adresáři pracovního adresáře. Webpack potřebuje vstupní bod a výstupní adresář. Náš vstupní bod je soubor src / index.jsx. Nastavíme náš výstupní adresář na výstupní a výstupní název souboru bundle.js. Musíme také zajistit, aby soubory, které začínají na .jsx, nepotřebovaly příponu, která bude zahrnuta při importu.

V konfiguračním souboru webpacku přidáme tato dvě důležitá pole:

// Tato knihovna nám umožňuje snadno kombinovat cesty
const cesta = vyžadovat ('cesta');
module.exports = {
   položka: path.resolve (__ jméno, 'src', 'index.jsx'),
   výstup: {
      path: path.resolve (__ dirname, 'output'),
      název souboru: 'bundle.js'
   },
   vyřešit: {
      přípony: ['.js', '.jsx']
   }
};

Nyní musíme nastavit naše nakladače. Pro soubory, které končí příponou .jsx, použijeme babel-loader s es2015 a reagujeme na předvolby. Pro soubory, které končí příponou .scss, použijeme sass-loader, css-loader a styl-loaders. Takto bude náš webpack.config.js vypadat, jakmile přidáme tyto nakladače:

// Tato knihovna nám umožňuje snadno kombinovat cesty
const cesta = vyžadovat ('cesta');
module.exports = {
   položka: path.resolve (__ jméno, 'src', 'index.jsx'),
   výstup: {
      path: path.resolve (__ dirname, 'output'),
      název souboru: 'bundle.js'
   },
   vyřešit: {
      přípony: ['.js', '.jsx']
   },
   modul: {
      pravidla: [
         {
             test: /\.jsx/,
             použití: {
                loader: 'babel-loader',
                možnosti: {předvolby: ['reagovat', 'es2015']}}
             }
         },
         {
            test: /\.scss/,
            use: ['style-loader', 'css-loader', 'sass-loader']
         }
      ]
   }
};

Nyní musíme spustit webpack. Nejjednodušší způsob, jak to udělat, je přidat ho do package.json. Do kořenového souboru JSON přidejte následující:

skripty: {
    "build": "webpack -p"
}

Flag -p je zkratka pro produkci, která kód minifikuje a zkresluje, aniž by bylo nutné do konfigurace zahrnout pluginy. Jakmile soubor uložíte, otevřete terminál a zadejte příkaz build build. Pokud nyní zkontrolujete výstupní adresář, uvidíte uvnitř něj soubor bundle.js. Nebudu mluvit o tom, jak načíst vytvořený soubor svazku, protože je mimo rozsah tohoto článku.

Webpack je nyní nastaven a soubor balíčku se vytváří. Je čas usnadnit vývoj. Potřebujeme rychlé načítání pro rychlejší vývoj. Nejjednodušší a nejlepší řešení je použít Webpack Dev Server. Nejprve musíme aktualizovat naši konfiguraci webového balíčku. Do kořenového adresáře webpacku přidejte následující:

devServer: {
   contentBase: './src',
   publicPath: '/ output'
}

Tyto dva řádky říkají serveru devíti webového serveru, aby četl obsah z adresáře src, aby obsloužil cestu pod / výstupní URL cestou. Nyní musíme jít na terminál a nainstalovat webpack dev server

příze přidat - dev webpack-dev-server

Po instalaci webového serveru dev přidáme do balíčku.json další skript a spustíme jej. Pod skripty přidejte následující:

"dev": "webpack-dev-server --hot - inline"

--hot flag znamená horké načítání, --inline flag znamená, že se nezobrazuje panel nástrojů webového serveru dev. Líbí se mi to tak, tak jsem to nastavil tak.

Nyní to pojďme:

příze běh dev

Server Webpack Dev Server ve výchozím nastavení běží na portu 8080. Otevřete prohlížeč a zadejte http: // localhost: 8080 a vše je nastaveno.

Příklad projektu, který jsme vytvořili, je umístěn na následující adrese URL: https://github.com/appristas/example-react-project

Závěr

Účelem tohoto článku bylo vysvětlit, proč jsou tyto nástroje nezbytné pro rychlé vytváření interaktivních webových aplikací pomocí React (nebo jakéhokoli jiného rámce v této věci) a jak tyto nástroje spolupracují, aby poskytovaly rychlý vývoj a nasazení jedním kliknutím.

Je pro mě důležité zmínit, že Facebook vytvořil skvělý nástroj pro spouštění reagujících aplikací bez nutnosti sestavení konfigurace: create-rea-app. Pod kapotou používá tento startovací balíček také webpack a babel.

Odkazy

NPM: https://www.npmjs.com
Příze: https://yarnpkg.com
Babel: https://babeljs.io
Webpack: https://webpack.js.org

Revize

  • [10/03/2017] Přidáno rozlišení a rozšíření do naší hlavní konfigurace webového balíčku, což je nezbytné k importu souborů JS bez zadávání přípon.
  • [05/11/2017] Opraveny některé gramatické chyby. Drobné změny ve struktuře.