20170714_about_fusebox - Speaker Deck

20170714_about_fusebox

Slide 1

Slide 1 text

'VTF#PY ৽ਐؾӶͷ+BWB4DSJQU.PEVMF#VOEMFSΛࢼͯ͠Έͨ - Try outstanding JavaScript module bundler - /BPLJ:"."%" !XBLBNTIB (PUBOEBKT

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

#BTJD&YBNQMF ಈ͔ͯ͠ΈΑ͏

Slide 7

Slide 7 text

#BTJD&YBNQMF

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

{  "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

Slide 11

Slide 11 text

FILE SIZE 3,477KB ELAPSED TIME 3.28s

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

.JOJGZXJUI#"#&- $PNQSFTTFE .BOHMF

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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