让我们使用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功能。
当然,与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 ↩