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

ࣗݾ঺հ Ԭຊ ୓໵
 Okamoto Takuya
 
 LINEגࣜձࣾ UITνʔϜ ॴଐ
 ژ౎։ൃࣨۈ຿ ϑϩϯτΤϯυΤϯδχΞ @tech_many

● Universal Module Definition (UMD) ● Javascript ͷίʔυΛෳ਺ͷloader্Ͱѻ͑ΔΑ͏ʹޓ׵ੑΛ΋ͨͤΔAPI ● ಉ͡ϑΝΠϧΛ Import۟, require, Ͱݺͼग़͢͜ͱ͕Ͱ͖Δ ● Ver1 ͷ࢓༷͸ 2015 ೥ ● ࣮૷ํ๏ͷྫ ● babel-plugin-transform-es2015-modules-umd Λ࢖͏ ● Webpack ͷ config தͷlibraryTargetΛ “umd" ʹઃఆ͢Δ ● ࢓༷Λݟͳ͕ΒࣗલͰ࣮૷͢Δ ͦ΋ͦ΋ͳʹ͔ UMD?

● 2ͭͷϓϩδΣΫτͰ1ͭͷϥΠϒϥϦΛڞ༗͔ͨͬͨ͠ ● 1ͭ͸ jQueryΛϝΠϯʹಈ͍͍ͯΔ΋ͷ(WebpackͳͲͳ͠) ● 2ͭ͸ vue-cli3 Ͱ։ൃ͞Εͨ΋ͷ(Webpack͋Γ) ● jQuery ͷํʹ͸ script λάͰಡΈࠐ·͍ͤͨ ● Vue-cli3 ͷํʹ͸ import ۟ͰಡΈࠐ·͍ͤͨ ͳͥUMDϑΝΠϧΛ࡞Γ͔ͨͬͨ Ϟνϕʔγϣϯ

● Vue CLI3 ͷςϯϓϨʔτΛͦͷ··࢖༻͠ॳظঢ়ଶΛ ࡞੒ ● ͦͷ্ͰϥΠϒϥϦΛݺͼग़͢४උΛ͢Δ ● ը໘தͷϘλϯΫϦοΫͨ͠ΒϥΠϒϥϦͷϝιου Λ࣮ߦ͢Δ؆୯ͳ΋ͷ VUEଆͷ࣮૷

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

● ϥΠϒϥϦϓϩδΣΫτଆͷ src/index.js ΛίϯύΠϧ
 dist/ ʹϥΠϒϥϦΛੜ੒͢Δɻ ● ׬੒ͨ͠ϥΠϒϥϦΛɺ
 ݺͼग़͠ݩͱͳΔVueϓϩδΣΫτͷ src ҎԼʹ഑ஔ ϑΝΠϧੜ੒&Ҡಈ

݁Ռ֬ೝ

શવͩΊ

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

● ؆ܿʹઆ໌͢Δͱɻɻ ● Babel ͷϔϧύʔػೳʹΑͬͯ Vue ଆͷίʔυʹࣗಈతʹίʔυ͕௥Ճ͞ΕΔ ● ͦͷίʔυΛಡΉͱ Webpack ͸ UMD Λ harmony (es6) ͱͯ͠ೝࣝ͢Δ ● ݁Ռಈ͔ͳ͍ ● UMD ͸جຊʮ͜ͷํݴ΋͍ͬͯͨΒ͜ͷloadingํ๏ʯͱ൑அ͍ͯ͠ΔͷͰ
 ͦͷ൑அج४͕ͳ͘ͳΔΠϝʔδʁ ৄ͘͠͸ issue ࢀর ݪҼ͸VUECLI3ͷBABELͷઃఆ

ϥΠϒϥϦϑΝΠϧΛBabel͔Βআ֎ VUECLI3ͷBABELͷઃఆΛมߋ babel.config.js

ͳ͓ͬͨ

THANK YOU