20170714_about_fusebox

2017年7月14日 『Gotanda.js #8 in Nextbeat』にて発表した資料です。
https://gotandajs.connpass.com/event/57562/

Transcript

1. 'VTF#PY
   ৽ਐؾӶͷ
   +BWB4DSJQU
   .PEVMF
   #VOEMFS
   Λࢼͯ͠Έͨ - Try outstanding JavaScript module bundler -  /BPLJ
   :"."%"
   !XBLBNTIB (PUBOEBKT
   
2. 
   8IBU`T
   'VTF#PY
   
    - FuseBox ͬͯԿ ? -
3. 
   8IBU`T
   'VTF#PY
   
    ଟػೳ͔ͭߴ଎ͳϞδϡʔϧόϯυϥʔ
   &4
   .PEVMFT
   ʹඪ४ରԠ
4. 
   8IBU`T
   'VTF#PY
   
    +BWB4DSJQU
   ͚ͩͰͳ͘
   5ZQF4DSJQU
   
   .ts
   
   .tsx
   
   ʹ΋σϑΥϧτͰରԠ
   5ZQF4DSJQU
   ίϯύΠϥ
   
   tsc
   
   ͑͋͞Ε͹ผ్ϓϥάΠϯ౳͸ෆཁ TS TSX
5. 
   8IBU`T
   'VTF#PY
   
    ϩʔΧϧαʔόػೳΛσϑΥϧτͰ౥ࡌ
   
   ˞
   ).3
   ͋Γ
   
   ϓϥάΠϯ௥ՃͰ
   "MU$44
   ͷτϥϯεύΠϧɺը૾ͷ
   #BTF
   ԽͳͲ͕Մೳ
6. 
   #BTJD
   &YBNQMF
    
   ಈ͔ͯ͠ΈΑ͏
   
7. 
   #BTJD
   &YBNQMF
   
8. 
   #BTJD
   &YBNQMF
    • https://angular.io/tutorial w ϓϩμΫγϣϯίʔυ
   
   *.ts
   
   w ϑΝΠϧ਺
   
   14
   w ίʔυߦ਺
   
   388
   w ґଘϥΠϒϥϦ w @angular/
   جຊతͳϠπ͍Ζ͍Ζ
   w SYKT
   w DPSFKT
   w [POFKT 5PVS
   PG
   )FSPFT
   
   "OHVMBS
   5VUPSJBM
9. const {FuseBox} = require('fuse-box');
 
 
 const fuse = FuseBox.init({
 hogeDir: 'src/scripts',
 output: 'public/assets/$name.js',
 sourceMaps: true,
 cache: true
 });
 
 const app = fuse
 .bundle('bundle')
 .instructions(`> main.ts`);
 
 fuse.run(); project/bin/fuse.js
10. {
 "name": "tutorials",
 "version": “1.0.0”,
 "scripts": {
 "bundle": "node ./bin/fuse”
 },
 "dependencies": {
 "@angular/common": "^4.2.6",
 "@angular/compiler": "^4.2.6",
 "@angular/core": "^4.2.6",
 "@angular/forms": "^4.2.6",
 "@angular/http": “^4.2.6", ⋮
 "core-js": "^2.4.1",
 "rxjs": "^5.4.2",
 "zone.js": "^0.8.12"
 },
 "devDependencies": {
 "fuse-box": "^2.2.0",
 "typescript": "2.3.4"
 }
 } package.json const {FuseBox} = require('fuse-box');
 
 
 const fuse = FuseBox.init({
 hogeDir: 'src/scripts',
 output: 'public/assets/$name.js',
 sourceMaps: true,
 cache: true
 });
 
 const app = fuse
 .bundle('bundle')
 .instructions(`> main.ts`);
 
 fuse.run(); project/bin/fuse.js
11. FILE SIZE 3,477KB ELAPSED TIME 3.28s
12. 
    $PNQBSF
    XJUI
    PUIFS
    .PEVMF
    #VOEMFST
     
    ଞͷϞδϡʔϧόϯυϥʔͱൺֱͯ͠ΈΑ͏
    
14. FILE SIZE 3,477KB ELAPSED TIME 3.28s FILE SIZE 3,064KB ELAPSED TIME 11.86s FILE SIZE 3,522KB ELAPSED TIME 9.06s FILE SIZE 3,455KB ELAPSED TIME 7.58s
15. .JOJGZ
    XJUI
    #"#&-
    $PNQSFTTFE
    
    .BOHMF
16. FILE SIZE 1,149KB FILE SIZE 977KB FILE SIZE 1067KB FILE SIZE 1,170KB .JOJGZ
    XJUI
    #"#&-
    $PNQSFTTFE
    
    .BOHMF
17. 
    'VTF#PY`T
    JNQSFTTJPO
     w ѹ౗తͳॲཧ଎౓͸ͦΕ͚ͩͰେ͖ͳັྗ
    w ଞϞδϡʔϧόϯυϥʔʹμϒϧείΞͷେࠩΛ෇͚͍ͯΔ
    w ࠷ॳ͔Β
    5ZQF4DSJQU
    ʹରԠ͍ͯ͠Δͷ΋خ͍͠ϙΠϯτ
    w "OHVMBS
    ͚ͩͰͳ͘
    $ZDMFKT
    ΋໰୊ͳ͘όϯυϧग़དྷΔ
    w ઃఆϑΝΠϧ
    
    fuse.js
    
    ͷॻ͖ํ͕γϯϓϧͰ෼͔Γ΍͍͢
18. 
    'VTF#PY`T
    JNQSFTTJPO
     w 8FCQBDL
    ಉ༷ଟػೳΛചΓʹ͍ͯ͠Δ͕ɺݸਓతʹ͸
    +4
    όϯυϧͷΈͷ༻్ Ͱ࢖͍͍ͨ
    w ϩʔΧϧαʔό΍
    $44
    ͷόϯυϧ͸ผʹ༻ҙ͢Ε͹ࡁΉ࿩
19. 
    'VTF#PY`T
    JNQSFTTJPO
     w ຊ౰͸
    3PMMVQKT
    ͷΑ͏ͳ୯ػೳಛԽܕ͕޷Έͳͷ͕ͩɺ
    $ZDMFKT
    ͩͱਖ਼ৗʹ
    όϯυϧ͞Εͳ͍ͷ͕ඇৗʹ࢒೦ʜ
    w ຊདྷඞཁͳͷʹෆཁͱ൑அ͞Εͯ
    5SFF
    4IBLJOH
    ͞ΕͯΔؔ਺͕͋Δͷ͔΋ʜʁ
    w *TTVF
    ʹ͸ڍ͕͍ͬͯΔ͕ະͩղܾ͞Ε͓ͯΒͣ
    w ॲཧ଎౓΋ଞΑΓ஗͍ͷ͕ؾʹͳΔ ˞
    όϯυϧॲཧࣗମ͸௨Γ·͢
20. *OUSPEVDF
    NZTFMG Զͷ໊ΛݴͬͯΈΖ
     
    ࣗݾ঺հ
    
21. גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ
    XFC
    ϑϩϯτΤϯυΤϯδχΞ ࢁా ௚थ /BPLJ
    :"."%" 
    *OUSPEVDF
    NZTFMG
     !XBLBNTIB
22. https://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG
24. https://tech.recruit-mp.co.jp 3.1 ϒϩά
25. 5IBOL
    ZPV