NPM / Yarn – vysledne do www

Duch.Veliky

Ahoj,

chtěl jsem začít používat NPM a při jeho studování jsem narazil ještě na Yarn. V podstatě pro základní použití jsou skoro stejné, takže je to asi jedno jaký nástroj člověk zvolí, ale potřeboval bych poradit, jakým způsobem je používate?

Defaultně když nainstaluji balíček třeba jquery a bootstrap, tak se nahraje do neveřejné složky:

/app
/node_modules - uložiště balíčků
/www

Problém je ale v tom, že je třeba je dostat do www, tak buď to můžu zkopírovat (což pak asi postrádá logiku proč to vůbec používat) nebo můžu ty balíčky instalovat do www (tím pádem zpřístupním spousty souborů, které ani není důvod zpřístupnit, když tam potřebuju dostat jen výsledný css a js soubor) a nebo můžu používat WebPack, Grunt nebo Gulp. Jak to řešíte vy?

Editoval Duch.Veliky (17. 3. 2018 17:50)

David Matějka

Jak to řešíte vy?

používáme WebPack, Grunt nebo Gulp (ja doporucuji webpack)

Jan Mikeš

@DavidMatějka ahoj, zrovna včera jsem bojoval s webpackem, který vyžaduje entry point js file. Nakonec jsem došel po nějakém čase k tomu, že pokud potřebuji pouze vzít js, spojit je, minifikovat, to stejné pro css + kompilace less → css, tak mi na to bude stačit grunt, protože jsem nebyl webpack config schopen napsat.

watch na soubory pro lokální vývoj a spuštění předchozího tasku.

Pokud máš nějakou ukázku, budu moc rád a velmi mi to pomůže začít používat webpack namísto gruntu ;)

Felix

Webpack je bundler a Gulp/Grunt jsou task runnery.

Pokud clovek chce spojovat JS soubory dohromady, tak na to nepotrebuje bundler. Pokud ale chces psat JS v ES6/ES7 tak je Webpack cislo 1.

Doporucuju Webpack pouzivat od zacatku, alespon se pak clovek nemusi trapit s prechodem.

Vytvorim nejakou ukazku.

Jan Mikeš

@Felix to by bylo súúúúúper! Přesně k něčemu podobnému jsem došel. Jedná se o klasický js a less, které jen potřebuji zkompilovat, spojit a minifikovat + watch, došel jsem k tomu že webpack nepotřebuji :-)

Budu se těšit na tvé demo

Felix

Tak jsem dal do kupy prvni fukcni verzi, contributte/webpack-skeleton. Berme to jako ukazku.

Pouzito:

Webpack 4 (babel-loader, babel-preset-env, file-loader, style-loader, css-loader, url-loader)
jQuery 3
Bootstrap 4
Naja (pro snippety)

Take jsou tam jednoduche 4 snippety, na ukazku, ze Naja funguje.

Bundluje to vsechno do 1 souboru v www/dist/app.bundle.js. Je tam i CSS, neni nikam extrahovano. Ale pro ukazku staci.

Webpack4 ma 2 mody, development a production.

npm run dev je pro vyvoj, nastartuje watcher
npm run build je vysledny bundle pro produkci

Pekne hratky preji. :-)

Editoval Felix (18. 3. 2018 17:21)

Matey

Ahoj, prvý krát som vyskúšal webpack s pomocou tejto ukážky. Ďakujem za ňu. Každopádne som v tom stratený.
Mal som problém s nette forms. Vyriešil som pridaním nette-forms do ProvidePlugin:

//webpack.config.js
new webpack.ProvidePlugin({
	$: 'jquery',
	jQuery: 'jquery',
	'window.jQuery': 'jquery',
	'window.Nette': 'nette-forms'
}),

Dnes som chcel použiť live-form-validation https://github.com/…-validation/
Ale ani za svet to nedokážem správne importovať do výsledného bundle.js tak aby to skutočne fungovalo.
(chrome konzola nepozná window.Nette ani window.LiveForm)
V prípade že si live form importnem priamo cez script tag je to vporaidku, ale rád by som to zabalil.

Prosím vás ako na to?

Momentále to mám takto (a nefunkčne):

//webpack.config.js
new webpack.ProvidePlugin({
	$: 'jquery',
	jQuery: 'jquery',
	'window.jQuery': 'jquery',
	'window.Nette': 'live-form-validation',
	'window.LiveForm': 'live-form-validation'
}),

//frontend-vendor.js (entry point)
import 'live-form-validation';

blaztar

Třeba někdo ocení i tento krátký článek představující možnost využít nástroj laravel-mix.
Je to wrapper kolem Webpacku, ale s jednoduchým API. Spolehlivě funguje také v Nette aplikaci.

Matey

Hurá, po hodinách nervov a desiatkach pokusov/omylov to zázračne funguje. Áno pre mňa zázračne :(
Jediné potrebné bolo použiť require() namiesto import a to rovno do window.Nette. Definícia ‚window.Nette‘ vo webpack.config.js už nebola potrebná. Ak by mal niekto chuť trošku to vysvetliť bol by som vďačný.

//frontend-vendor.js
import 'jquery';
import 'popper.js';
import 'bootstrap';
window.Nette = require('live-form-validation');

Vyskúšal som tento spôsob aj na ukážke od @Felix a taktiež funkčné. Takže aby bol v ukážke funkčný nette-forms je potrebné zapísať to takto:

//https://github.com/trainit/2018-03-nette-webpack/blob/master/www/assets/app.js
// Required dependencies
import 'jquery';
import 'bootstrap';
//import 'nette-forms';
window.Nette = require('nette-forms');

// Assets
import 'bootstrap/dist/css/bootstrap.css';
import './css/style.css';

// Application
import './js/naja';

Felix

Matey napsal(a):

Ohledne DefinePluginu, tak ten pouze nahradi pouziti window.Nette v ramci knihoven a kodu, ktere jsou zabalene webpackem.

Tzn, ze webpack to vsechno transformuje, ale neznecistuje globalni stav. Ergo, window.Nette nebude fungovat v DevTools.

Je nekolik cest jak to obejit: https://stackoverflow.com/a/40416826

Pokud chces videt v DevTools pod klicem window.Nette, musis si to sam priradit.

window.Nette = require('nette-forms');

Felix

Malinko jsem jeste aktualizoval ukazku. Pridal jsem separaci CSS stylu do vlastniho bundlu, rozchodil Nette Forms, v tomhle hodne pomohla Naja, protoze automaticky detekuje window.Nette a pripadne navesi eventy (cc @jiri.pudil).

Pridal jsem ukazku Nette formularu, s manualnim vykreslovanim, ruznyma snippetama, validaci, aplikovanim filtru a takovych drobnosti. :-)

Mrknette na to, contributte/webpack-skeleton.

Editoval Felix (3. 4. 2018 12:18)

Matey

@Felix ďakujem za odpoveď. Super rozšírená ukážka sa rozhodne hodí k lepšiemu porozumeniu. Každopádne s gulpom ma hlava tolme nebolela :)