使用Angular Schematics可以自动生成Angular组件和storybook配置,从而自动生成.story.ts文件。下面是一些示例代码:
首先,安装Angular Schematics:
npm install -g @angular-devkit/schematics-cli
接着,使用以下命令生成一个新的Schematic项目:
schematics blank ../my-schematic
然后,在你的项目中添加Angular Schematics依赖:
npm install @storybook/angular @angular/cdk @ng-packagr/core
现在我们需要编写我们的schematic,用来生成以下文件:
src/app/components/my-component/my-component.component.ts
src/app/components/my-component/my-component.component.html
src/app/components/my-component/my-component.component.scss
src/app/components/my-component/my-component.component.spec.ts
src/app/components/my-component/my-component.stories.ts
以下是示例代码:
import { Rule, SchematicContext, Tree, chain, url, apply, move, mergeWith, applyTemplates } from '@angular-devkit/schematics';
import { strings } from '@angular-devkit/core';
import { normalize } from 'path';
// You don't have to export the function as default. You can also have more than one rule factory
// per file.
export function mySchematic(_options: any): Rule {
return (tree: Tree, _context: SchematicContext) => {
return chain([
generateComponent(_options),
generateStorybook(_options)
])(tree, _context);
};
}
function generateComponent(options: any): Rule {
const templateSource = apply(url('./files'), [
applyTemplates({
...strings,
...options,
}),
move(
normalize(`src/app/components/${options.name}`)
)
]);
return mergeWith(templateSource);
}
function generateStorybook(options: any): Rule {
const templateSource = apply(url('./files'), [
applyTemplates({
...strings,
...options,
}),
move(
normalize(`src/app/components/${options.name}`)
)
]);
return mergeWith(templateSource);
}
你
上一篇:AngularStackBlitz应用无法识别tsconfig中的路径别名。
下一篇:AngularStorybookanddateFNS'localemustcontainlocalizeproperty'