webpackによる人類共通コンポーネント計画

B72422afc5f3ffc844f672b59122e16d?s=47 joe_re
March 11, 2016

 webpackによる人類共通コンポーネント計画

gotanda.js#3のLT資料です

B72422afc5f3ffc844f672b59122e16d?s=128

joe_re

March 11, 2016
Tweet

Transcript

  1. WebpackʹΑΔ ਓྨڞ௨
 ίϯϙʔωϯτܭը @joe_re

  2. twitter: @joe_re
 github: @joe-re - ໊લ: ͡ΐ͏ - freeeͱ͍͏ձࣾͰಇ͍͍ͯ·͢ -

    ࠓ͸Ϋϥ΢υڅ༩ܭࢉ΍ͬͯ·͢
  3. React͕୆಄͠ɺੈք͸·͞ ʹେίϯϙʔωϯτ࣌୅ʂʂʂ

  4. ͱ͜ΖͰͦ΋ͦ΋ ίϯϙʔωϯτͬͯԿʁʁʁ

  5. DOM͓Αͼ ৼΔ෣͍͕ఆٛ͞Εͨ΋ͷ

  6. ίϯϙʔωϯτࢦ޲ʹ͓͚Δ ίϯϙʔωϯτ͸࠶ར༻Մೳ Ͱͳ͚Ε͹ͳΒͳ͍

  7. ࠶ར༻Մೳͳίϯϙʔωϯτ Λ࡞Δʹ͸ʁ

  8. ίϯϙʔωϯτ͸༩͑ΒΕͨ ஋ΛϢʔβͷཧղͰ͖Δ View(DOM)ʹม׵͢Δɺ DOMม׵ػʹప͢Δ

  9. ༩͑ΒΕͨ஋͕ಉ͡ͳͷʹɺ ҧ͏ϨϯμϦϯά݁Ռʹͳͬ ͯ͸͍͚ͳ͍

  10. ඳըͷݩʹͳΔ஋ͷੜ੒ϩδο Ϋ͸ܾͯ͠ίϯϙʔωϯτʹ ؚΜͰ͸͍͚ͳ͍ (ͦͷͨΊͷFlux)

  11. ਓྨڞ௨ίϯϙʔωϯτͱ͸

  12. ͜͏͍͏ͷ

  13. ͜͏ݟ͑ͯ໿150ߦͷ
 ϩδοΫ͕٧·͍ͬͯΔ • ݺͼग़࣌͠ʹmax-minͷൣғܾΊΒΔ • ݄ͷબ୒ΛҰϲ݄લʹม͑ͨ࣌ʹɺଘࡏ͠ͳ ͍೔෇Λબ୒͠ͳ͍
 (2016/3/31 ➡ 2016/2/29ʹͳΔ)

    • ͳͲͳͲ
  14. ڞ௨Խͯ͠ͲͷϓϩμΫτ͔ ΒͰ΋ݺ΂ΔΑ͏ʹ͍ͨ͠ʂ

  15. ڞ௨ίϯϙʔωϯτͱ͢Δ͜ͱ Ͱ • ڞ௨Ͱ࢖͏Α͏ͳinputɺselectͳͲʹ͓͍ͯɺݟ ͨ໨΍ૢ࡞ੑʹϓϩμΫτ͝ͱʹൃੜ͢Δ͹Βͭ ͖Λͳͤ͘Δ
 (freeeϒϥϯυͷΞϓϦέʔγϣϯʹ͓͚Δڞ௨ͷ ݟͨ໨ɺৼΔ෣͍Λ࣋ͨͤΔ) • ࠶ར༻ੑͷߴ͍ίϯϙʔωϯτʹΑΔ։ൃͷޮ཰

    Խ
  16. ஫ҙ • ਓྨڞ௨ͱ͍͍ͭͭɺ͜͜Ͱ͍͏ਓྨʹ͸
 1ͭͷձࣾͷఏڙ͢ΔWebΞϓϦέʔγϣϯͱ ͦΕΛར༻͢ΔϢʔβ͔͠ଘࡏ͠·ͤΜ • Reactͷ࢖༻Λલఏʹ͓࿩͠·͢

  17. Α͠ɺWebpackͩʂ

  18. Webpackͱ͸ • WebΞϓϦέʔγϣϯͷ੩తΞηοτͷϏϧυ πʔϧͰ͢ • JSͷτϥϯεύΠϧ΍ґଘղܾ͸΋ͪΖΜͰ͖ ·͢ • JS͚ͩͰͳ͘Style΍ImageͳͲͷϏϧυ͓Αͼ όϯυϧ΋αϙʔτ͠·͢

  19. ࠶ར༻Մೳͳίϯϙʔωϯτ΁ ͷཉ๬ • τϥϯεύΠϧʹඞཁͳπʔϧͷόʔδϣϯ͸ཁٻͨ͘͠ͳ ͍(babelͷόʔδϣϯͱ͔) • ͱ͸͍͑࢖༻͢ΔϥΠϒϥϦͷࡉ͔ͳόʔδϣϯ͸֤Ξϓ ϦέʔγϣϯͰ؅ཧ͍ͨ͠ • ݟͨ໨΋ἧ͍͑ͨ(styleఆٛ΋ؚΈ͍ͨ)

    • ͱ͸͍͑ར༻ଆͰstyleͷඍௐ੔͸͍ͨ͠(styleͷଧͪফ͠΍ ্ॻ͖͕༰қͰ͋Δඞཁ͕͋Δ)
  20. ͬ͘͟Γํ਑ • τϥϯεύΠϧޙͷjsΛఏڙ͢Δ • ࢖༻͢ΔϥΠϒϥϦ͸externalsʹࢦఆ͢Δ • css loaderΛ࢖͍ɺstyleఆٛΛϩʔΧϧείʔ ϓͰ࣋ͨͤΔ

  21. Webpackͷexternalsͷࢦఆ

  22. Webpackͷexternalsͷࢦఆ ᶃFYUFSOBMTର৅ͷจࣈྻ ᶄτϥϯεύΠϧޙͷจࣈྻ ᶅґଘղܾํ๏

  23. ɾϏϧυલ ɾϏϧυޙ XFCQBDL Webpackͷexternalsͷࢦఆ

  24. ɾϏϧυલ ɾϏϧυޙ XFCQBDLͰϏϧυ Webpackͷexternalsͷࢦఆ ᶃFYUFSOBMTର৅ͷจࣈྻ ᶅґଘղܾํ๏ ᶄτϥϯεύΠϧޙͷจࣈྻ

  25. externalsࢦఆͰಘΔ΋ͷ • ϥΠϒϥϦͷόʔδϣϯࢦఆ͸ར༻ଆʹدͤ ΒΕΔ • ϏϧυޙͷjsΛఏڙͯ͠΋αΠζ͕཈͑ΒΕΔ

  26. css loaderͷར༻ IPHFSFBDUKT IPHFTDTT

  27. css loaderͷར༻

  28. css loaderʹΑͬͯಘΔ΋ͷ • style΋ίϯϙʔωϯτԽ͢Δ͜ͱͰʹؚΉ͜ͱͰɺݟͨ໨ͷ͹ Β͖ͭΛ཈͑ΒΕΔ • ϩʔΧϧείʔϓ͸ηϨΫλ໊Λbase64ͰΤϯίʔυ͢Δ͜ͱ ʹΑ࣮ͬͯݱ͍ͯ͠ΔɻΫϥε໊͕มΘΔ͚ͩͰৄࡉ౓͕ߴ͘ͳ Δ͜ͱ͸ͳ͍
 (Αͬͯ֎෦͔ΒͷελΠϧͷଧͪফ͠ɾ্ॻ͖͕༰қʹͰ͖Δ)

    • ίϯϙʔωϯτ։ൃ࣌ʹηϨΫλͷিಥΛؾʹ͠ͳͯ͘ྑ͘ͳ Δ
  29. ίϯϙʔωϯτͷߏ଄ͷن໿ ൪֎ଆʹ͸֎෦͔Β౉͞ΕͨDMBTT/BNFͱɺϩʔΧϧείʔϓΛDMBTT/BNFʹ͢Δ ൪໨͸ίϯϙʔωϯτͷ໊ΛDMBTT/BNFʹ͢Δ ͦΕΑΓ಺ଆʹίϯϙʔωϯτͷ಺༰Λهड़͢Δ

  30. ن໿Λ࣋ͨͤΔ͜ͱͰɺ ֎෦͔ΒͷελΠϧͷ ଧͪফ͠΍্ॻ͖͕ ͠΍͘͢ͳΔ

  31. ن໿ʹ͍ͭͯ͸
 ઈࢍࢼߦࡨޡதͰ͢ɻɻ 
 ྑ͍ϓϥΫςΟε͝ଘ஌Ͱ͠ ͨΒੋඇڭ͍͑ͯͩ͘͞ʂ

  32. ΤϯδχΞઈࢍืूதʂ

  33. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ