import a böngészőben - hwsw · heuréka. import 1. rövid és deklaratív 2. aszinkron. import...

14
Import a böngészőben HWSW meetup

Upload: others

Post on 24-Jan-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Import a böngészőben - HWSW · Heuréka. Import 1. Rövid és deklaratív 2. aszinkron. Import példa lib.js Nevesített export app.js Nevesített import. import./user.js./click.js

Import a böngészőben

HWSW meetup

Page 2: Import a böngészőben - HWSW · Heuréka. Import 1. Rövid és deklaratív 2. aszinkron. Import példa lib.js Nevesített export app.js Nevesített import. import./user.js./click.js

Nagggyon 2014...

index.html

Függőségek sorrendje

click.js

SEAF

Honnan jön ez a ‘user’?

Page 3: Import a böngészőben - HWSW · Heuréka. Import 1. Rövid és deklaratív 2. aszinkron. Import példa lib.js Nevesített export app.js Nevesített import. import./user.js./click.js

Dependency hell2014

Page 4: Import a böngészőben - HWSW · Heuréka. Import 1. Rövid és deklaratív 2. aszinkron. Import példa lib.js Nevesített export app.js Nevesített import. import./user.js./click.js

Bundling

1. Browserify2. Webpack3. Rollup4. Parcel

Page 5: Import a böngészőben - HWSW · Heuréka. Import 1. Rövid és deklaratív 2. aszinkron. Import példa lib.js Nevesített export app.js Nevesített import. import./user.js./click.js

common.js./user.js

./click.js

exports

app.js

node app.js

Bálint has clicked

Page 6: Import a böngészőben - HWSW · Heuréka. Import 1. Rövid és deklaratív 2. aszinkron. Import példa lib.js Nevesített export app.js Nevesített import. import./user.js./click.js

Lássuk ezt a böngészőben….

Page 7: Import a böngészőben - HWSW · Heuréka. Import 1. Rövid és deklaratív 2. aszinkron. Import példa lib.js Nevesített export app.js Nevesített import. import./user.js./click.js

2016, Bundle

index.html

Csak egy fájl

dist/bundle.js

ismerős?

Page 8: Import a böngészőben - HWSW · Heuréka. Import 1. Rövid és deklaratív 2. aszinkron. Import példa lib.js Nevesített export app.js Nevesített import. import./user.js./click.js

Heuréka

Page 9: Import a böngészőben - HWSW · Heuréka. Import 1. Rövid és deklaratív 2. aszinkron. Import példa lib.js Nevesített export app.js Nevesített import. import./user.js./click.js

Import

1. Rövid és deklaratív2. aszinkron

Page 10: Import a böngészőben - HWSW · Heuréka. Import 1. Rövid és deklaratív 2. aszinkron. Import példa lib.js Nevesített export app.js Nevesített import. import./user.js./click.js

Import példalib.js

Nevesített export

app.js

Nevesített import

Page 11: Import a böngészőben - HWSW · Heuréka. Import 1. Rövid és deklaratív 2. aszinkron. Import példa lib.js Nevesített export app.js Nevesített import. import./user.js./click.js

import./user.js

./click.js

exports

app.js

node app.js

Bálint has clicked

Page 12: Import a böngészőben - HWSW · Heuréka. Import 1. Rövid és deklaratív 2. aszinkron. Import példa lib.js Nevesített export app.js Nevesített import. import./user.js./click.js
Page 13: Import a böngészőben - HWSW · Heuréka. Import 1. Rövid és deklaratív 2. aszinkron. Import példa lib.js Nevesített export app.js Nevesített import. import./user.js./click.js

(Ne) próbáld ki otthon

1. serve csomag: a file:// nem működik CORS miatt2. type=”module”

Page 14: Import a böngészőben - HWSW · Heuréka. Import 1. Rövid és deklaratív 2. aszinkron. Import példa lib.js Nevesített export app.js Nevesített import. import./user.js./click.js

köszönömSéra Bálint

[email protected]://twitter.com/damnadmhttps://github.com/balintsera