Pro Yearly is on sale from $80 to $50! »

20170714_about_fusebox

82ed567f8497acfed7f7b464225dd536?s=47 wakamsha
July 14, 2017

 20170714_about_fusebox

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

82ed567f8497acfed7f7b464225dd536?s=128

wakamsha

July 14, 2017
Tweet

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 5PVSPG)FSPFT"OHVMBS5VUPSJBM
  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. $PNQBSFXJUIPUIFS.PEVMF#VOEMFST ଞͷϞδϡʔϧόϯυϥʔͱൺֱͯ͠ΈΑ͏

  13. None
  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. .JOJGZXJUI#"#&- $PNQSFTTFE  .BOHMF

  16. FILE SIZE 1,149KB FILE SIZE 977KB FILE SIZE 1067KB FILE

    SIZE 1,170KB .JOJGZXJUI#"#&- $PNQSFTTFE  .BOHMF
  17. 'VTF#PY`TJNQSFTTJPO w ѹ౗తͳॲཧ଎౓͸ͦΕ͚ͩͰେ͖ͳັྗ w ଞϞδϡʔϧόϯυϥʔʹμϒϧείΞͷେࠩΛ෇͚͍ͯΔ w ࠷ॳ͔Β5ZQF4DSJQUʹରԠ͍ͯ͠Δͷ΋خ͍͠ϙΠϯτ w "OHVMBS͚ͩͰͳ͘$ZDMFKT΋໰୊ͳ͘όϯυϧग़དྷΔ w

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

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

    ˞όϯυϧॲཧࣗମ͸௨Γ·͢
  20. *OUSPEVDFNZTFMG Զͷ໊ΛݴͬͯΈΖ ࣗݾ঺հ

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

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

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

  25. 5IBOLZPV