UMDをVue-CLI3で読み込む

F6aa66406250b46d39025b444104b0ce?s=47 tech_many
February 28, 2019

 UMDをVue-CLI3で読み込む

I introduced how to setup UMD in webpack and how to integrate with Vue-CLI3.
These slides were presented as a LT session on in v-kansai #3 on Feb 28th.

F6aa66406250b46d39025b444104b0ce?s=128

tech_many

February 28, 2019
Tweet

Transcript

  1. UMDΛVUE-CLI3ͰಡΈࠐΉ Okamoto Takuya

  2. ࣗݾ঺հ Ԭຊ ୓໵
 Okamoto Takuya
 
 LINEגࣜձࣾ UITνʔϜ ॴଐ
 ژ౎։ൃࣨۈ຿

    ϑϩϯτΤϯυΤϯδχΞ @tech_many
  3. • Universal Module Definition (UMD) • Javascript ͷίʔυΛෳ਺ͷloader্Ͱѻ͑ΔΑ͏ʹޓ׵ੑΛ΋ͨͤΔAPI • ಉ͡ϑΝΠϧΛ

    Import۟, require, <script src=“”> Ͱݺͼग़͢͜ͱ͕Ͱ͖Δ • Ver1 ͷ࢓༷͸ 2015 ೥ • ࣮૷ํ๏ͷྫ • babel-plugin-transform-es2015-modules-umd Λ࢖͏ • Webpack ͷ config தͷlibraryTargetΛ “umd" ʹઃఆ͢Δ • ࢓༷Λݟͳ͕ΒࣗલͰ࣮૷͢Δ ͦ΋ͦ΋ͳʹ͔ UMD?
  4. • 2ͭͷϓϩδΣΫτͰ1ͭͷϥΠϒϥϦΛڞ༗͔ͨͬͨ͠ • 1ͭ͸ jQueryΛϝΠϯʹಈ͍͍ͯΔ΋ͷ(WebpackͳͲͳ͠) • 2ͭ͸ vue-cli3 Ͱ։ൃ͞Εͨ΋ͷ(Webpack͋Γ) •

    jQuery ͷํʹ͸ script λάͰಡΈࠐ·͍ͤͨ • Vue-cli3 ͷํʹ͸ import ۟ͰಡΈࠐ·͍ͤͨ ͳͥUMDϑΝΠϧΛ࡞Γ͔ͨͬͨ Ϟνϕʔγϣϯ
  5. • Vue CLI3 ͷςϯϓϨʔτΛͦͷ··࢖༻͠ॳظঢ়ଶΛ ࡞੒ • ͦͷ্ͰϥΠϒϥϦΛݺͼग़͢४උΛ͢Δ • ը໘தͷϘλϯΫϦοΫͨ͠ΒϥΠϒϥϦͷϝιου Λ࣮ߦ͢Δ؆୯ͳ΋ͷ

    VUEଆͷ࣮૷
  6. αϯϓϧιʔείʔυ ϥΠϒϥϦଆͷ࣮૷ src/index.js webpack.config.js

  7. • ϥΠϒϥϦϓϩδΣΫτଆͷ src/index.js ΛίϯύΠϧ
 dist/ ʹϥΠϒϥϦΛੜ੒͢Δɻ • ׬੒ͨ͠ϥΠϒϥϦΛɺ
 ݺͼग़͠ݩͱͳΔVueϓϩδΣΫτͷ src

    ҎԼʹ഑ஔ ϑΝΠϧੜ੒&Ҡಈ
  8. ݁Ռ֬ೝ

  9. શવͩΊ

  10. ʮimportͨ͠UMDϞδϡʔϧ͕node_modules/Ҏ֎͸UndefinedʹͳΔʯ GITHUBʹISSUE͕… https://github.com/vuejs/vue-cli/issues/2586

  11. • ؆ܿʹઆ໌͢Δͱɻɻ • Babel ͷϔϧύʔػೳʹΑͬͯ Vue ଆͷίʔυʹࣗಈతʹίʔυ͕௥Ճ͞ΕΔ • ͦͷίʔυΛಡΉͱ Webpack

    ͸ UMD Λ harmony (es6) ͱͯ͠ೝࣝ͢Δ • ݁Ռಈ͔ͳ͍ • UMD ͸جຊʮ͜ͷํݴ΋͍ͬͯͨΒ͜ͷloadingํ๏ʯͱ൑அ͍ͯ͠ΔͷͰ
 ͦͷ൑அج४͕ͳ͘ͳΔΠϝʔδʁ ৄ͘͠͸ issue ࢀর ݪҼ͸VUECLI3ͷBABELͷઃఆ
  12. ϥΠϒϥϦϑΝΠϧΛBabel͔Βআ֎ VUECLI3ͷBABELͷઃఆΛมߋ babel.config.js

  13. ͳ͓ͬͨ

  14. THANK YOU