Storybook and AngularCLI

Storybookの3.4.0とAngularCLI対応のお話

Transcript

1. StorybookͱAngularCLI #ng_sake11
2. About me • ૔ݟ ༸ี • Quramy(GitHub/Twitter/Qiita) • Angular + TypeScriptͰSPA࡞ͬͯ·͢
3. About me • ૔ݟ ༸ี • Quramy(GitHub/Twitter/Qiita) • Angular + TypeScriptͰSPA࡞ͬͯ·͢ • ӕ͖ͭ·ͨ͠ 
 React + Redux + FlowͰSSRͯ͠·͢
4. ͱ͍͏͜ͱͰ།Ұ࢓ࣄͰ ࢖ͬͯΔπʔϧ
5. https://storybook.js.org/
6. Storybook is Կ • ίϯϙʔωϯτΨΠυΤϯδϯ • ݩʑ͸Reactઐ༻ͩͬͨ
 ࠓ͸Vue.js, Angular, React Native, Polymer ΋ • AngularରԠ͸v3.3.0͔Β
7. ಋೖ͸ΊͬͪΌ؆୯ $ ng new ng-storybook-demo $ cd ng-storybook-demo $ npm i @storybook/cli@3.4.0-rc.0 $ npx getstorybook
8. @storybook/angular • v3.3.x ͸ʮͱΓ͋͑ͣಈ͘ʯఔ౓ • v3.4.0(RC)Ͱࢼ͢ͷ͕Φεεϝ • Angular TemplateରԠ • StoryshotsରԠ • Angular CLIରԠ
9. ͪΐ͍ͱdemo
10. Angular CLIରԠͷ࿩ • ൃ୺ https://github.com/storybooks/ storybook/issues/2688
11. ՝୊ͷ಺༰ • getstorybook͸Storybook༻ͷwebpackઃఆΛ͍࣋ͬͯΔ • getstorybook͸AngularCLIʹґଘ͠ͳ͍ • Style RulesͳͲɺStorybook༻ͷwebpack configΛ֦ு͢Δඞ ཁ͕͋ͬͨ • Component css: tostring-loader / raw-loader • Global css: style-loader • Angular CLIϢʔβʔʹͦΕΛ΍ΒͤΔͷ͸ແཧήʔײ
13. ΍ͬͨ͜ͱ ͜͜ʹBOHVMBSDMJ͕͋Δ͡ΌΖʁ
    
    ʈТʈ
    
    㱭BOHVMBSDMJKTPO㱬
    
    ͜ΕΛ
    
    ʈТʈ
    
    㱭 TUPSZCPPL 㱬
    
    
    ʈТʈ
    
    㲇㱭㱬㲇
    
    ͜͏͡Όͬʂ
    
    ʈТʈ
    
    㱭BOHVMBSDMJ@DPOpHKT㱬
14. ΍ͬͨ͜ͱ • .anguar-cli.jsonΛಡΈऔΓɺϓϩδΣΫτͷ ઃఆʹैͬͯwebpackͷϧʔϧΛ࡞Δ • .angular-cli.jsonͷ಺༰௨ΓʹɺΞηοτ΍ Global Style͕ద༻͞ΕΔΑ͏ʹͨ͠
15. 1. CLIઃఆͷ෮ݩ
16. 2. Call webpack-configs
17. Webpack config as a API • ׂͱΘ͔Γ΍͘͢഑ஔ͞Ε͍ͯΔ
18. ·ͱΊ • @storybook/angular ࢖ͬͯͶ • ஁͑ͯΑ͔ͬͨbuildے • @angular/cli + webpackΛࣗ෼Ͱ֦ு͢Δํ ๏͸͓֮͑ͯ͘ͱͲ͔͜Ͱ໾ʹཱ͔ͭ΋ʁ • υΩϡϝϯτແ͍ͷͰɺࣗݾ੹೚Ͱ
19. Thank you! by @Quramy