Využijte nástroje, které využívají sílu Webpacku se snadným jednoduchým přednastavením pro rychlé spouštění projektů JavaScript, to vše bez předchozí konfigurace.
Ponořit se do zahájení nového projektu JS často přináší značné úsilí při přípravě vašeho prostředí před zahájením vývoje projektu. Mnoho vývojářů dává přednost používání nejmodernějších funkcí a moderních pracovních postupů s nástroji, aby byl proces příjemný. Bohužel, tento přístup může mít často poměrně dlouhou křivku učení, protože lidé tráví čas zkoumáním osvědčených postupů, sledováním složitých konfiguračních tutoriálů a experimentováním se standardními verzemi. Co kdybychom mohli vzít práci, kterou komunita vložila do konfigurace svých vlastních projektů, a zachytit ji do sdílených balíčků, které může používat kdokoli? To je důvod, proč jsme vytvořili Neutrino.
Neutrino je nástroj, který kombinuje sílu sestavování a konfigurace Webpacku a podporuje schopnost vytvářet projekty založené na JavaScriptu s předvolbami. Předvolba je základním stavebním kamenem Neutrina. S ním můžete doplnit projekt o řadu funkcí, včetně toho, jak je kompilován, zajistit kvalitu kódu, a dokonce rychle přidat testování. Rozdělením konfigurace do sestavitelných jednotek můžeme podpořit ekosystém, kde se přizpůsobení projektu stává plug and play.
Abychom získali představu o tom, jak snadné je začít s Neutrinem, projdu vytvořením několika jednoduchých projektů.
Poznámka:V nadcházejících příkladech používám Správce balíčků příze pro instalaci závislostí a vytváření skriptů. Toto je pouze moje osobní preference a pokud si to přejete, můžete použít klienta npm.
Rychlý start Node.js
Abychom mohli začít s naším prvním projektem Node.js založeným na Neutrinu, použijeme neutrino-preset-node. Podle dokumentace umožňuje:
- Žádná konfigurace předem a v případě potřeby snadné přepsání
- Kompiluje pro podporu Node.js v6.9+, moduly ES, asynchronní funkce
- Automaticky zapojené zdrojové mapy
Výborně, můžeme začít!
Nejprve potřebujeme adresář, ze kterého začneme pracovat. Z vašeho terminálu vytvořte nový adresář a přejděte do něj. Poté nainstalujeme neutrino a neutrino-preset-node jako vývojové závislosti.
❯ mkdir project && cd project ❯ yarn add --dev neutrino neutrino-preset-node
Ve výchozím nastavení předvolba Node.js hledá zdrojový kód v src adresář, s hlavním vstupním bodem index.js . Vytvořme tento soubor a upravme jej, pouze s jednoduchým HTTP serverem, který odešle vše, co na něj odešleme.
import { createServer } from 'http';
const port = process.env.PORT || 3000;
createServer(({ url }, response) => {
console.log(`Received message at ${url}`);
response.end(url.slice(1));
})
.listen(port, () => console.log(`Running on :${port}`)); Dále přidáme do souboru package.json několik skriptů, které nám poskytnou několik jednoduchých příkazů ke spuštění a sestavení naší aplikace:
{
"scripts": {
"start": "neutrino start --presets neutrino-preset-node",
"build": "neutrino build --presets neutrino-preset-node",
"serve": "yarn start && node build"
},
"devDependencies": {
"neutrino": "^4.0.1",
"neutrino-preset-node": "^4.0.1"
}
}
Jsme připraveni spustit naši aplikaci! Pomocí yarn serve v jednom terminálu a curl v jiném můžeme vidět náš kód v akci:
❯ yarn serve
Warning: This preset does not support watch compilation. Falling back to a one-time build.
Hash: 8fa3faf9cbe8ca235884
Version: webpack 2.2.1
Time: 632ms
Asset Size Chunks Chunk Names
index.js 3.6 kB 0 [emitted] index
index.js.map 3.53 kB 0 [emitted] index
Running on :3000
---
❯ curl http://localhost:3000/Hello\!
Hello! Ano. To je ono.
Zahájení projektu se zcela moderním toolchainem nevyžaduje žádné počáteční náklady.
Rychlý start React
Pro zábavu změňme tento projekt z Node.js na React. Podle dokumentace Neutrino má přednastavení React:
- Syntaxe JSX, moduly ES, podpora posledních 2 verzí prohlížeče a asynchronní funkce
- Podpora importu CSS, HTML, obrázků, písem a ikon přímo z JavaScriptu
- Výměna horkého modulu, žádné šablony HTML a mnoho dalšího
Pojďme si vyměnit předvolby a nainstalovat nějaké závislosti Reactu.
❯ yarn remove neutrino-preset-node && yarn add --dev neutrino-preset-react ❯ yarn add react react-dom
Naše příkazy package.json je třeba změnit, aby nyní používaly předvolbu React:
{
"scripts": {
"start": "neutrino start --presets neutrino-preset-react",
"build": "neutrino build --presets neutrino-preset-react"
},
} Namísto vytváření serveru Node.js vykreslíme nějaký obsah do webové aplikace. Podle konvence nám naše přednastavení umožňuje připojit naši aplikaci k ID „root“:
import React from 'react';
import { render } from 'react-dom';
render((
<main>
<h1>Hello! 😎</h1>
</main>
), document.getElementById('root')); Zpět do terminálu a můžeme spustit naši aplikaci a načíst ji do prohlížeče:
❯ yarn start ✔ Development server running on: http://localhost:5000 ✔ Build completed
Doufejme, že to ukazuje, jak jednoduché je začít s novým projektem React! Pokud s Reactem pro svůj webový projekt nepracujete, zvažte použití neutrino-preset-web pro jiné knihovny nebo obecné webové aplikace.
Více předvoleb
Neutrino usnadňuje skládání více předvoleb dohromady. Pro demonstraci přidáme přednastavení lintingu, které bude odpovídat našemu projektu stylovému průvodci Airbnb. Nainstalujte neutrino-preset-airbnb-base :
❯ yarn add --dev neutrino-preset-airbnb-base
Abychom omezili určité opakování, využijeme funkci Neutrino, která bude čerpat z řady předvoleb v našem package.json. To nám ušetří pojmenování všech předvoleb, které chceme použít pro každý příkaz. Odeberte přednastavení z příkazů skriptu a přesuňte je do config.presets .
{
"config": {
"presets": [
"neutrino-preset-airbnb-base",
"neutrino-preset-react"
]
},
"scripts": {
"start": "neutrino start",
"build": "neutrino build"
}
}
Poznámka:neutrino-preset-airbnb-base je třeba načíst před naším přednastavením React podle dokumentace.
Pokud upravíme náš kód a zavedeme něco, co je v rozporu s přednastavením, jsme v konzoli jasně upozorněni:
❯ yarn start ✔ Development server running on: http://localhost:5000 ✔ Build completed ERROR in ./src/index.js /node-project/src/index.js 6:10 error Strings must use singlequote quotes ✖ 1 problem (1 error, 0 warnings)
Také testování!
Rychle přidáme jednoduchý Jest test, protože proč ne? Předvolba Neutrino neutrino-preset-jest používá konvenci test adresář, s určitými očekáváními ohledně přípon souborů:
❯ yarn add --dev neutrino-preset-jest ❯ mkdir test && touch test/add.test.js ❯ touch src/add.js
Pojďme napsat rychlý test, který ověří, že funkce správně provádí jednoduché sčítání, které zakrátko vytvoříme:
import add from '../src/add';
describe('addition', () => {
it('adds 2 numbers', () => {
expect(add(3, 5)).toBe(8);
});
});
Nyní náš doplňkový modul v src/add.js :
export default (x, y) => x + y;
Upravte soubor package.json ještě jednou přidáním předvolby Jest do našeho seznamu spolu s příkazem ke spuštění testů:
{
"config": {
"presets": [
"neutrino-preset-airbnb-base",
"neutrino-preset-react",
"neutrino-preset-jest"
]
},
"scripts": {
"start": "neutrino start",
"build": "neutrino build",
"test": "neutrino test"
}
} Spusťte test!
❯ yarn test
PASS test/add.test.js
addition
✓ adds 2 numbers (3ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.228s
Ran all test suites. Pokud bychom udělali chybu při psaní našeho sčítacího modulu a omylem použili násobení:
export default (x, y) => x * y;
To by způsobilo selhání testu:
❯ yarn test
FAIL test/add.test.js
● addition › adds 2 numbers
expect(received).toBe(expected)
Expected value to be (using ===):
8
Received:
15
at Object.<anonymous> (test/add.test.js:5:38)
at process._tickCallback (internal/process/next_tick.js:103:7)
addition
✕ adds 2 numbers (5ms)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 1.221s
Ran all test suites. Úprava sestavení
Jednou ze skvělých vlastností Neutrina je, že nemusíte vyměnit jednoduchost za uzamčení nebo nedostatek rozšiřitelnosti. Postupem podle dokumentace můžete proces sestavení projektu doplnit o další funkce, které nejsou součástí vašeho přednastavení. Pokud zjistíte, že tyto funkce nebo změny používáte ve více projektech, můžete je zahrnout do své vlastní předvolby a sdílet je se svým týmem a komunitou!
Závěr
Udělat z Neutrina nástroj, kterým je dnes, bylo hodně těžké práce, ale doufáme, že se vám bude líbit. Vyzkoušejte to ve svých projektech, poskytněte zpětnou vazbu, vytvořte si vlastní přednastavení a sdílejte je s ostatními. Chceme, aby každý byl úspěšný s Neutrinem.
Pokud byste se chtěli zapojit do vývoje nebo dokumentace, navštivte prosím sekci přispívající v dokumentech, kde najdete úplné podrobnosti, nebo navštivte naše úložiště GitHub.
Dokumentace k Neutrinu: https://neutrino.js.org/
Neutrino GitHub: https://github.com/mozilla-neutrino/neutrino-dev
Dík!
Eli Perelman &Hassan Ali — Mozilla