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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 8IBU`T'VTF#PY
    ϩʔΧϧαʔόػೳΛσϑΥϧτͰ౥ࡌ ˞).3͋Γ

    ϓϥάΠϯ௥ՃͰ"MU$44ͷτϥϯεύΠϧɺը૾ͷ#BTFԽͳͲ͕Մೳ

    View full-size slide

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

    View full-size slide

  7. #BTJD&YBNQMF

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  13. 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 full-size slide

  14. .JOJGZXJUI#"#&-
    $PNQSFTTFE

    .BOHMF

    View full-size slide

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

    .BOHMF

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide