Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20170714_about_fusebox

wakamsha
July 14, 2017

 20170714_about_fusebox

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

wakamsha

July 14, 2017
Tweet

More Decks by wakamsha

Other Decks in Technology

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