让我们使用Angular + Storybook创建组件指南

由于 Storybook v3.3.0 发布了对 Angular 的支持,我立即进行了尝试。

将Angular CLI项目引入的方法

如果要在使用Angular CLI创建的项目中引入,只需要执行一个命令。

ng new my-ng-storybook-prj
cd my-ng-storybook-prj
yarn add @storybook/cli --dev
yarn run getstorybook

只需敲击它,因为package.json中定义了storybook和build-storybook脚本,完成了.

yarn run storybook

本地地址为localhost:6006,将启动storybook。

已经完全支持HMR功能。

Q645xzK9WL.gif

当然,与React和Vue版本一样,您可以通过运行yarn run build-storybook将storybook输出为静态网站。

目前,getstorybook使用的設置是使用.js文件來編寫story。如果想要改成使用TypeScript,可以修改Webpack的Require Context。毫無疑問,.ts文件更好,所以我已提交了PR進行修正。

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.ts$/); //ここね
function loadStories() {
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);

使用Angular框架编写Story的方法

在撰写故事时,可以使用 @storybook/angular 的 storiesOf。

storiesOf('Awesome Button', module).add('to Storybook', () => ({
  component: AwesomeButtonComponent,
  props: {
    name: 'Button',
    myClick: action('Clicked!'),
  },
}));

基本上要指定组件的目标和属性。
属性可以根据目标是@Input还是@Output来指定,@Input将作为输入,@Output将在EventEmitter触发时调用回调函数。

如果只是一个简单的组件,那么这样就可以了。但是,如果需要对该组件进行模块设置才能使其工作,则可以进一步指定 moduleMetadata。

storiesOf('Awesome Button', module).add('to Storybook', () => ({
    component: AwesomeButtonComponent,
    props: { /*...*/ },
    moduleMetadata: {
      imports: [],
      schemas: [],
      declarations: [],
      providers: []
    }
  }))

如果您有编写过Angular单元测试的经验,那么您应该对下面这样的测试模块设置很熟悉。Storybook的moduleMetadata也承担着相同的角色。

TestBed.configureTestingModule({
  declarations: [ BannerComponent ],
  providers: [
    { provide: ComponentFixtureAutoDetect, useValue: true }
  ]
})

有关Story的编写方式的详细信息,请参考 https://github.com/storybooks/storybook/tree/master/examples/angular-cli/src/stories 中的各种示例,这也是一个很好的参考。

有关CSS的各种注意事项

目前的Storybook并没有特别依赖于Angular CLI。因此,在处理组件样式方面,需要进行一些额外的处理。

const genDefaultConfig = require('@storybook/angular/dist/server/config/defaults/webpack.config.js');

module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env);

  // Overwrite .css rule
  const cssRule = config.module.rules.find(rule => rule.test && rule.test.toString() === '/\\.css$/');
  if (cssRule) {
    cssRule.exclude = /\.component\.css$/;
  }

  // Add .scss rule
  config.module.rules.unshift({
    test: /\.scss$/,
    loaders: ['raw-loader', 'sass-loader'],
  });

  return config;
};

我本来应该参考Angular CLI的模型,并应用相同的规则,但这可能会变得有点复杂,所以我将把它作为今后的作业。

结束

您是否对快速了解Storybook + Angular的用法感兴趣呢?由于引入非常简单,我希望您能尝试使用Angular创建组件指南。

另外,如果有 tsuyoshiwada/storybook-chrome-screenshot 的 Angular 版本,就可以在 CI 中捕捉 Storybook 的截图,并使用 reg-suit 进行图像快照测试,看起来有很多可能性啊。

正好,我自己做了一些 PR,请合并。现在可以创建一个基于 Angular CLI 的项目,拥有 Angular + Storybook + Screenshot + Snapshot test 的结构。我在 Quramy/angular-sss-demo 上创建了一个演示仓库。

那么,再见。 (Nà me, .)

也许可以把Angular Adocare作为素材,但由于时机稍有差异,所以我选择优先使用CDK。 ↩

https://storybook.js.org/basics/guide-angular/#configure-style-rules  ↩

广告
将在 10 秒后关闭
bannerAds