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.

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