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

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

  • Upload
    others

  • View
    5

  • Download
    0

Embed Size (px)

Citation preview

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