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
   

   View Slide

2. 8IBU`T'VTF#PY
   - FuseBox ͬͯԿ ? -
   

   View Slide

3. 8IBU`T'VTF#PY
   ଟػೳ͔ͭߴ଎ͳϞδϡʔϧόϯυϥʔ
   &4.PEVMFTʹඪ४ରԠ
   

   View Slide

4. 8IBU`T'VTF#PY
   +BWB4DSJQU͚ͩͰͳ͘5ZQF4DSJQU .ts.tsx
   ʹ΋σϑΥϧτͰରԠ
   5ZQF4DSJQUίϯύΠϥ tsc
   ͑͋͞Ε͹ผ్ϓϥάΠϯ౳͸ෆཁ
   TS TSX
   

   View Slide

5. 8IBU`T'VTF#PY
   ϩʔΧϧαʔόػೳΛσϑΥϧτͰ౥ࡌ ˞).3͋Γ
   
   ϓϥάΠϯ௥ՃͰ"MU$44ͷτϥϯεύΠϧɺը૾ͷ#BTFԽͳͲ͕Մೳ
   

   View Slide

6. #BTJD&YBNQMF
   ಈ͔ͯ͠ΈΑ͏
   

   View Slide

7. #BTJD&YBNQMF
   

   View Slide

8. #BTJD&YBNQMF
   • https://angular.io/tutorial
   w ϓϩμΫγϣϯίʔυ *.ts
   
   w ϑΝΠϧ਺14
   w ίʔυߦ਺388
   w ґଘϥΠϒϥϦ
   w @angular/جຊతͳϠπ͍Ζ͍Ζ
   w SYKT
   w DPSFKT
   w [POFKT
   5PVSPG)FSPFT"OHVMBS5VUPSJBM
   

   View Slide

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
   

   View Slide

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
    

    View Slide

11. FILE SIZE
    3,477KB
    ELAPSED TIME
    3.28s
    

    View Slide

12. $PNQBSFXJUIPUIFS.PEVMF#VOEMFST
    ଞͷϞδϡʔϧόϯυϥʔͱൺֱͯ͠ΈΑ͏
    

    View Slide

13. View Slide

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
    

    View Slide

15. .JOJGZXJUI#"#&-
    $PNQSFTTFE
    
    .BOHMF
    

    View Slide

16. FILE SIZE
    1,149KB
    FILE SIZE
    977KB
    FILE SIZE
    1067KB
    FILE SIZE
    1,170KB
    .JOJGZXJUI#"#&-
    $PNQSFTTFE
    
    .BOHMF
    

    View Slide

17. 'VTF#PY`TJNQSFTTJPO
    w ѹ౗తͳॲཧ଎౓͸ͦΕ͚ͩͰେ͖ͳັྗ
    w ଞϞδϡʔϧόϯυϥʔʹμϒϧείΞͷେࠩΛ෇͚͍ͯΔ
    w ࠷ॳ͔Β5ZQF4DSJQUʹରԠ͍ͯ͠Δͷ΋خ͍͠ϙΠϯτ
    w "OHVMBS͚ͩͰͳ͘$ZDMFKT΋໰୊ͳ͘όϯυϧग़དྷΔ
    w ઃఆϑΝΠϧ fuse.js
    ͷॻ͖ํ͕γϯϓϧͰ෼͔Γ΍͍͢
    

    View Slide

18. 'VTF#PY`TJNQSFTTJPO
    w 8FCQBDLಉ༷ଟػೳΛചΓʹ͍ͯ͠Δ͕ɺݸਓతʹ͸+4όϯυϧͷΈͷ༻్
    Ͱ࢖͍͍ͨ
    w ϩʔΧϧαʔό΍$44ͷόϯυϧ͸ผʹ༻ҙ͢Ε͹ࡁΉ࿩
    

    View Slide

19. 'VTF#PY`TJNQSFTTJPO
    w ຊ౰͸3PMMVQKTͷΑ͏ͳ୯ػೳಛԽܕ͕޷Έͳͷ͕ͩɺ$ZDMFKTͩͱਖ਼ৗʹ
    όϯυϧ͞Εͳ͍ͷ͕ඇৗʹ࢒೦ʜ
    w ຊདྷඞཁͳͷʹෆཁͱ൑அ͞Εͯ5SFF4IBLJOH͞ΕͯΔؔ਺͕͋Δͷ͔΋ʜʁ
    w *TTVFʹ͸ڍ͕͍ͬͯΔ͕ະͩղܾ͞Ε͓ͯΒͣ
    w ॲཧ଎౓΋ଞΑΓ஗͍ͷ͕ؾʹͳΔ
    ˞όϯυϧॲཧࣗମ͸௨Γ·͢
    

    View Slide

20. *OUSPEVDFNZTFMG
    Զͷ໊ΛݴͬͯΈΖ
    ࣗݾ঺հ
    

    View Slide

21. גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ
    XFCϑϩϯτΤϯυΤϯδχΞ
    ࢁా ௚थ
    /BPLJ:"."%"
    *OUSPEVDFNZTFMG
    !XBLBNTIB
    

    View Slide

22. https://tech.recruit-mp.co.jp
    NET BIZ DIV. TECH BLOG
    

    View Slide

23. View Slide

24. https://tech.recruit-mp.co.jp
    3.1 ϒϩά
    

    View Slide

25. 5IBOLZPV
    

    View Slide