Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
MedPeer X みんなのウェディング合同勉強会
Search
pipopotamasu
January 18, 2018
0
1.1k
MedPeer X みんなのウェディング合同勉強会
pipopotamasu
January 18, 2018
Tweet
Share
More Decks by pipopotamasu
See All by pipopotamasu
How JS Works
pipopotamasu
0
200
vue-function-tester
pipopotamasu
2
1.2k
Dive into vue-test-utils ~~Road of 1.0.0~~
pipopotamasu
0
96
medpacker_introduction_20190523
pipopotamasu
0
500
Introduction of medpacker: RoR Frontend Boilerplate
pipopotamasu
0
4.8k
新サービス・JOURNAL(ジャーナル)開発秘話
pipopotamasu
2
250
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
pipopotamasu
0
12k
MedPeer_JapaxTaxi_MeetUp_Actioncable
pipopotamasu
0
590
UXBridge_vol3_pipopotamasu
pipopotamasu
2
890
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Automating Front-end Workflow
addyosmani
1371
200k
4 Signs Your Business is Dying
shpigford
185
22k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Site-Speed That Sticks
csswizardry
11
880
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
A better future with KSS
kneath
239
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Why Our Code Smells
bkeepers
PRO
339
57k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Transcript
Webpackerಋೖ࣌ʹ ͓͓͖͍͑ͯͨ͞ઃఆ ϝυϐΞגࣜձࣾ ΤϯδχΞ ଜ্ େ
self_introduce.json { “name”: “ଜ্େ”, “age”: 26, “github”: “pipopotamasu”, “company”: “ϝυϐΞגࣜձࣾ”,
“tech”: [“Ruby”, “PHP”, “Vue.js”, “React”], “hobby”: [“ٿ”, “өը”], }
None
ͱ͍͏Θ͚ͰൃදςʔϚ
Webpackerಋೖ࣌ʹ ͓͓͖͍͑ͯͨ͞ઃఆ
͜͜Ͱ࣭ʂ
ීஈRailsͬͯΔਓ (´ɾωɾ`)ϊγ
WebpackerͬͯΔਓ (ɾωɾ)ϊγ
Webpackerͱ • RailsͰwebpackΛѻ͏ͨΊͷϥούʔGem • Rails5.1͔Βಋೖ
Webpackͱ • JavaScriptcssϑΝΠϧͳͲͷґଘؔΛղ ܾ͠ɺͻͱ·ͱΊ(bundle)ͷϑΝΠϧͱͯ͠ ग़ྗͯ͘͠ΕΔπʔϧ • ઃఆ࣍ୈͰES6Ҏ߱ͷจ๏JSϑϨʔϜϫʔ ΫͳͲͷίʔυΛϒϥβ͕ಡΈࠐΊΔΑ͏ ʹมͯ͘͠ΕͨΓ͢Δ
͜ͷൃදͰհ͢Δ͜ͱ • ඞͣ͠ඞཁ͡Όͳ͍͚Ͳ͋ͬͨ΄͏͕͍͍ ઃఆ • Ε͕ͪͳઃఆ • ͳͲͳͲ
͜ͷൃදͷΰʔϧ • ͢ͰʹWebpackerΛ͍ͬͯΔਓ͕ઃఆΛݟ ͤΔΑ͏ʹ • ·ͩWebpackerΛೖΕ͍ͯͳ͍ਓͷࢀߟʹ
͋Ε?
֮͑ͯ·͔͢?
͜ͷษڧձͷςʔϚ
͜ͷษڧձͷςʔϚ • νʔϜͷ։ൃྗ্ • αʔϏεͷվળͷεϐʔυΞοϓ • RailsͷγεςϜҠߦ
͜ͷษڧձͷςʔϚ • νʔϜͷ։ൃྗ্ • αʔϏεͷվળͷεϐʔυΞοϓ • RailsͷγεςϜҠߦ
͜ͷษڧձͷςʔϚ • νʔϜͷ։ൃྗ্ • αʔϏεͷվળͷεϐʔυΞοϓ • RailsͷγεςϜҠߦ ࠓ͢༰ͷྖҬ
(∵ɾωɾʣšŖŤƃŇ
Webpackerಋೖ࣌ʹ ͓͓͖͍͑ͯͨ͞ઃఆ • CommonsChunkPlugin • ݹ͍ϒϥβରԠ • rails-ujs
͓͓͖͍͑ͯͨ͞ઃఆ ͦͷ1
CommonsChunkPlugin
CommonsChunkPlugin?
CommonsChunkPluginͱ • WebpackͷPlugin • ෳͷΤϯτϦʔϙΠϯτ(ϖʔδຖʹҰ൪࠷ॳʹݺͼग़͞ ΕΔJSϑΝΠϧ)ؒͰར༻͍ͯ͠Δڞ௨ϥΠϒϥϦʔɺϞ δϡʔϧΛόϯυϧͨ͠ϑΝΠϧΛग़ྗͯ͘͠ΕΔPlugin • ग़ྗ͞ΕͨϑΝΠϧChunk FileͱݺΕΔ
ΤϯτϦʔϑΝΠϧ?
Plugin?
ΤϯτϦʔϙΠϯτͱ ϖʔδຖʹҰ൪࠷ॳʹݺͼग़͞ΕΔJSϑΝΠϧ
Pluginͱ
Pluginͱ
Pluginͱ • WebpackͷػೳΛ֦ு͢Δͷ
௨ৗ index1.js index2.js index1.bundle.js index2.bundle.js
CommonsChunkPlugin༻ index1.js index2.js index1.bundle.js index2.bundle.js vendor.bundle.js
ϝϦοτ • શମͷϑΝΠϧαΠζ͕খ͘͞ͳΔ • ΤϯτϦʔϙΠϯτ͕มΘͬͯChunk File Ωϟογϡ͕ޮ͖ɺϑΝΠϧͷಡΈࠐΈ͕ ͘ͳΔ
Chunkઃఆ࣌ͷbundleίʔυ
௨ৗ࣌ͷbundleίʔυ
ൺֱ ௨ৗ CommonsChunkPlugin
CommonsChunkPluginઃఆ
ΤϯτϦʔϙΠϯτؒͷڞ௨Ϟδϡʔϧɾ ϥΠϒϥϦʔग़ྗϑΝΠϧͷઃఆ config/webpack/environment.js
CommonsChunkPlugin༻ index1.js index2.js index1.bundle.js index2.bundle.js vendor.bundle.js
ڞ௨ϞδϡʔϧɾϥΠϒϥϦʔΛΤϯτ ϦʔϙΠϯτ͕ಡΈࠐΉͨΊͷઃఆ config/webpack/environment.js
CommonsChunkPlugin༻ index1.js index2.js index1.bundle.js index2.bundle.js vendor.bundle.js
https://github.com/rails/webpacker/blob/ master/docs/webpack.md#add-common-chunks
͓͓͖͍͑ͯͨ͞ઃఆ ͦͷ2
ݹ͍ϒϥβରԠ
babel-polyfill
babel-polyfill ৽͍͠ϒϥβͰ͑ͯɺݹ͍ϒϥβͰ ͑ͳ͍ػೳΛ͑ΔΑ͏ʹมͯ͘͠ΕΔ Ұ෦άϩʔόϧείʔϓΛԚછ͢Δͷ͕͋Δ ɾΤϯτϦʔϙΠϯτͷઌ಄ʹಡΈࠐΉ͜ͱͰ ͑Δ
͍ํ
͔͠͠ɺɺɺ
ΤϯτϦʔϑΝΠϧ
ΤϯτϦʔϑΝΠϧ
ΤϯτϦʔϑΝΠϧ
ΤϯτϦʔϑΝΠϧ
ΤϯτϦʔϑΝΠϧ
େྔͷimport
ຖճΤϯτϦʔϑΝΠϧʹ import͢ΜͷΊΜͲ͘Ͷ?
babel-plugin-transform- runtime (͍ͷͰҎޙtransform-runtime)
transform-runtime ৽͍͠ϒϥβͰ͑ͯɺݹ͍ϒϥβͰ͑ͳ͍ ػೳΛ͑ΔΑ͏ʹมͯ͘͠ΕΔ άϩʔόϧԚછ͞Εͳ͍ ຖճಡΈࠐ·ͳ͍͍ͯ͘ Πϯελϯεϝιου͕มͰ͖ͳ͍
ຖճಡΈࠐ·ͳ͍͍ͯ͘ .babelrc
Πϯελϯεϝιου͕มͰ͖ͳ͍ • ͜Μͳͷ͕มͰ͖ͳ͍ • ྫ) Array ObjectͷΠϯελϯεϝιου
·ͱΊ
babel-polyfill ৽͍͠ϒϥβͰ͑ͯɺݹ͍ϒϥβͰ͑ ͳ͍ػೳΛ͑ΔΑ͏ʹมͯ͘͠ΕΔ Ұ෦άϩʔόϧείʔϓΛԚછ͢Δͷ͕͋Δ ΤϯτϦʔϙΠϯτͷઌ಄ʹಡΈࠐΉ͜ͱͰ ͑Δ
transform-runtime ৽͍͠ϒϥβͰ͑ͯɺݹ͍ϒϥβͰ͑ͳ͍ ػೳΛ͑ΔΑ͏ʹมͯ͘͠ΕΔ άϩʔόϧԚછ͞Εͳ͍ ຖճಡΈࠐ·ͳ͍͍ͯ͘ Πϯελϯεϝιου͕มͰ͖ͳ͍
polyfillɺtransform-runtime ڞʹϝϦοτσϝϦοτ͋Δ ͷͰ༻๏༻ྔΛक͍ͬͯ· ͠ΐ͏
ݹ͍ϒϥβαϙʔτඞਢͷ ߹ɺͲͪΒ͔ೖΕ·͠ΐ͏
͓͓͖͍͑ͯͨ͞ઃఆ ͦͷ3
rails-ujs
rails-ujs?
rails-ujs • Ajax௨৴ͷgetҎ֎ΛΑ͠ͳʹͬͯ͘ΕΔ (ϦΫΤετϔομʔʹCSRFτʔΫϯࠐΉͱ͔) • formϔϧύʔͷremote: true͕ಈ͘ͷ͍ͭ͜ͷ ͓͔͛ • ݩjquery-ujsͱ͍͏໊લ͕ͩͬͨɺjQueryґଘ
Λແͨ͘͠ͷͱͯ͠࡞ΒΕͨ
WebpackerͷAjaxॲཧ • ॳظͰrails-ujsͷઃఆ͕͞Ε͍ͯͳ͍ • ಛʹCSRFτʔΫϯ͕༩͞Ε͍ͯͳ͍ͨΊ POSTPUTͷΞΫγϣϯ͕ૹΕͳ͍
ී௨ʹAjaxॲཧΛ͢Δͱ…
WebpackerͰrails-ujsΛ ͍͍ײ͡ʹ͍͍ͨʂ
ઃఆํ๏
Step1: Assets Piplineͷrails-ujs Λআ • WebpackerͷํͰઃఆ͢ΔͨΊɺɹɹɹ Assets Pipeline Ͱআ͓ͯ͘͠ app/assets/javascripts/application.js
Step2: yarn install rails-ujs • ͦͷ·Μ·
Step3: WebpackerͰrails-ujsىಈ • WebpackerଆͰͷrails-ujsͷىಈॲཧ • ͓͔ͬͯͳ͍ͱformϔϧύʔͷremote: true͕ಈ͔ ͳ͘ͳΔ app/javascript/packs/rails-ujs.js app/javascript/packs/application.js
Step4: ajaxͷϦΫΤετϔομʔʹCSRF τʔΫϯΛຒΊࠐΉ app/javascript/packs/hoges/index.js
͔͠͠ɺɺɺ
JSϑΝΠϧ
ຖճAjaxΛ༻͢ΔϑΝΠϧ ʹCSRFઃఆ͢ΔͷͩΔ͍…
WebpackerͰࣗಈͰCSRF ઃఆ͍ͨ͠!
ઃఆํ๏ jquery-csrf.js index.js
WebpackerΛ͏ͱ͖͍͍ײ͡ ʹCSRFτʔΫϯΛઃఆ͠·͠ΐ͏
·ͱΊ • Commons Chunk Plugin • ݹ͍ϒϥβରԠ • rails-ujs ιʔε
https://github.com/pipopotamasu/medpeer-mwed
ָ͍͠WebpackerϥΠϑΛ!
None
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠