現代フロントエンドに欠かせないwebpackとBabelを理解しよう

2917a3c430817eb71086f8973c06ebba?s=47 sakito
August 30, 2019

 現代フロントエンドに欠かせないwebpackとBabelを理解しよう

builderscon tokyo 2019の登壇資料
https://builderscon.io/tokyo/2019

Twitter
https://twitter.com/__sakito__

2917a3c430817eb71086f8973c06ebba?s=128

sakito

August 30, 2019
Tweet

Transcript

  1. 6.

    &$."4DSJQUʹ͓͚Δஈ֊ͷ4UBHF w 4UBHF4USBXQFSTPO
 ΞΠσΟΞஈ֊ w 4UBHF1SPQPTBM
 ࢓༷ͷχʔζɺ࢖༻ྫɺݒ೦఺ɺ໨తΛղઆ͢Δஈ֊ w 4UBHF%SBGU
 ߏจɺηϚϯςΟοΫɺ"1*͕༻ҙͰ͖͕ͨɺ


    มߋͷՄೳੑ͕͋Δஈ֊ w 4UBHF$BOEJEBUF
 &$."4DSJQUFEJUPST͔Βͷঝೝ͕ԼΓɺ
 ֎෦͔ΒͷϑΟʔυόοΫΛ΋Β͏ஈ֊ w 4UBHF'JOJTIFE
 UFTUͷςετ͕׬ྃ͠ɺͭҎ্ͷϒϥ΢βͰ
 ࣮૷͞Εɺ&$."4DSJQUFEJUPST͔Β࢓༷ςΩετͷঝೝ͕ԼΓͨஈ֊ w 5$ͷঝೝΛ௨Γɺਖ਼ࣜʹ&$."4DSJQUͷ࢓༷ʹ௥Ճ
  2. 7.

    &$."4DSJQUʹ͓͚Δஈ֊ͷ4UBHF w 4UBHF4USBXQFSTPO
 ΞΠσΟΞஈ֊ w 4UBHF1SPQPTBM
 ࢓༷ͷχʔζɺ࢖༻ྫɺݒ೦఺ɺ໨తΛղઆ͢Δஈ֊ w 4UBHF%SBGU
 ߏจɺηϚϯςΟοΫɺ"1*͕༻ҙͰ͖͕ͨɺ


    มߋͷՄೳੑ͕͋Δஈ֊ w 4UBHF$BOEJEBUF
 &$."4DSJQUFEJUPST͔Βͷঝೝ͕ԼΓɺ
 ֎෦͔ΒͷϑΟʔυόοΫΛ΋Β͏ஈ֊ w 4UBHF'JOJTIFE
 UFTUͷςετ͕׬ྃ͠ɺͭҎ্ͷϒϥ΢βͰ
 ࣮૷͞Εɺ&$."4DSJQUFEJUPST͔Β࢓༷ςΩετͷঝೝ͕ԼΓͨஈ֊ w 5$ͷঝೝΛ௨Γɺਖ਼ࣜʹ&$."4DSJQUͷ࢓༷ʹ௥Ճ
  3. 8.

    +BWB4DSJQU&OHJOF w ৽͍͠+BWB4DSJQUͷػೳΛϒϥ΢βͰ࢖༻Ͱ͖Δ͔͸
 +BWB4DSJQU&OHJOF࣍ୈ w ϒϥ΢βʹΑͬͯ+BWB4DSJQU&OHJOF͸ҧ͏ w $ISPNF7 w 'JSFGPY4QJEFS.POLFZ

    w 4BGBSJ+BWB4DSJQU$PSF w &HFɺ*&$IBLSB w &EHF͸ݱࡏ7ʹมߋ͞ΕΔ༧ఆ w ϒϥ΢βόʔδϣϯʹΑͬͯ࢖༻Ͱ͖Δػೳʹ͕ࠩ
 ى͖Δ
  4. 9.
  5. 33.
  6. 37.
  7. 39.

    1BSTJOH ߦΘΕͨॲཧ JOEFYKT "45 5SBOTGPSNBUJPO "45 $PEF(FOFSBU MJCJOEFYKT !CBCFMDMJ !CBCFMDPSF

    !CBCFMQBSTFS !CBCFMHFOFSBUPS 1BSTJOH !CBCFMQMVHJOUSBOTGPSNBSSPXGVODUJPOT
  8. 40.
  9. 50.

    $PODFQUT w &OUSZ
 ى఺ͱͳΔϑΝΠϧΛࢦఆ w 0VUQVU
 ॲཧ͕׬ྃͨ͠ϑΝΠϧΛग़ྗ͢Δ w -PBEFST
 ࢦఆϑΝΠϧʹ೚ҙͷॲཧΛՃ͑ΔɺͭͷλεΫ

    w 1MVHJOT
 XFCQBDLͷ༷ʑͳΠϕϯτΛIPPL͠ɺσʔλΛૢ࡞ͨ͠Γ
 ॲཧΛ࣮ߦͰ͖Δ w .PEF
 OPOF EFWFMPQNFOU QSPEVDUJPOΛࢦఆ͠ɺ
 NPEFʹԠͯ͡ɺύϑΥʔϚϯε࠷దԽ΍ѹॖͳͲΛߦ͏ w #SPXTFS$PNQBUJCJMJUZ
 ϒϥ΢βͷޙํޓ׵ੑ

  10. 51.
  11. 72.