Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Storybook and AngularCLI

Storybook and AngularCLI

Storybookの3.4.0とAngularCLI対応のお話

893f54413c2bd9ba41d11d753aacaf2c?s=128

Yosuke Kurami

March 12, 2018
Tweet

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ϢʔβʔʹͦΕΛ΍ΒͤΔͷ͸ແཧήʔײ
  12. None
  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