Storybook and AngularCLI

by Yosuke Kurami

Slide 1

Slide 1 text

StorybookͱAngularCLI #ng_sake11

Slide 2

Slide 2 text

About me • ૔ݟ ༸ี • Quramy(GitHub/Twitter/Qiita) • Angular + TypeScriptͰSPA࡞ͬͯ·͢

Slide 3

Slide 3 text

About me • ૔ݟ ༸ี • Quramy(GitHub/Twitter/Qiita) • Angular + TypeScriptͰSPA࡞ͬͯ·͢ • ӕ͖ͭ·ͨ͠   React + Redux + FlowͰSSRͯ͠·͢

Slide 4

Slide 4 text

ͱ͍͏͜ͱͰ།Ұ࢓ࣄͰ ࢖ͬͯΔπʔϧ

Slide 5

Slide 5 text

https://storybook.js.org/

Slide 6

Slide 6 text

Storybook is Կ • ίϯϙʔωϯτΨΠυΤϯδϯ • ݩʑ͸Reactઐ༻ͩͬͨ  ࠓ͸Vue.js, Angular, React Native, Polymer ΋ • AngularରԠ͸v3.3.0͔Β

Slide 7

Slide 7 text

ಋೖ͸ΊͬͪΌ؆୯ $ ng new ng-storybook-demo $ cd ng-storybook-demo $ npm i @storybook/[email protected] $ npx getstorybook

Slide 8

Slide 8 text

@storybook/angular • v3.3.x ͸ʮͱΓ͋͑ͣಈ͘ʯఔ౓ • v3.4.0(RC)Ͱࢼ͢ͷ͕Φεεϝ • Angular TemplateରԠ • StoryshotsରԠ • Angular CLIରԠ

Slide 9

Slide 9 text

ͪΐ͍ͱdemo

Slide 10

Slide 10 text

Angular CLIରԠͷ࿩ • ൃ୺ https://github.com/storybooks/ storybook/issues/2688

Slide 11

Slide 11 text

՝୊ͷ಺༰ • getstorybook͸Storybook༻ͷwebpackઃఆΛ͍࣋ͬͯΔ • getstorybook͸AngularCLIʹґଘ͠ͳ͍ • Style RulesͳͲɺStorybook༻ͷwebpack conﬁgΛ֦ு͢Δඞ ཁ͕͋ͬͨ • Component css: tostring-loader / raw-loader • Global css: style-loader • Angular CLIϢʔβʔʹͦΕΛ΍ΒͤΔͷ͸ແཧήʔײ

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

΍ͬͨ͜ͱ ͜͜ʹBOHVMBSDMJ͕͋Δ͡ΌΖʁ ʈТʈ 㱭BOHVMBSDMJKTPO㱬 ͜ΕΛ ʈТʈ 㱭 TUPSZCPPL 㱬 ʈТʈ 㲇㱭㱬㲇 ͜͏͡Όͬʂ ʈТʈ 㱭BOHVMBSDMJ@DPOpHKT㱬

Slide 14

Slide 14 text

΍ͬͨ͜ͱ • .anguar-cli.jsonΛಡΈऔΓɺϓϩδΣΫτͷ ઃఆʹैͬͯwebpackͷϧʔϧΛ࡞Δ • .angular-cli.jsonͷ಺༰௨ΓʹɺΞηοτ΍ Global Style͕ద༻͞ΕΔΑ͏ʹͨ͠

Slide 15

Slide 15 text

1. CLIઃఆͷ෮ݩ

Slide 16

Slide 16 text

2. Call webpack-conﬁgs

Slide 17

Slide 17 text

Webpack conﬁg as a API • ׂͱΘ͔Γ΍͘͢഑ஔ͞Ε͍ͯΔ

Slide 18

Slide 18 text

·ͱΊ • @storybook/angular ࢖ͬͯͶ • ஁͑ͯΑ͔ͬͨbuildے • @angular/cli + webpackΛࣗ෼Ͱ֦ு͢Δํ ๏͸͓֮͑ͯ͘ͱͲ͔͜Ͱ໾ʹཱ͔ͭ΋ʁ • υΩϡϝϯτແ͍ͷͰɺࣗݾ੹೚Ͱ

Slide 19

Slide 19 text

Thank you! by @Quramy