하나의 저장소에서 금형과 이야기책을 운행, 구축, 배치하다
개발자도 개발 과정에서 열을 다시 싣는 것을 통해 이야기책 이야기를 사용할 수 있다는 것이 제 목표입니다.또한 웹 구성 요소를 각각 npm 등록표에 배치하고 이야기책을 공공 URL에 배치할 수 있다.
본고는 한 저장소에서 이야기책과 금형을 조합하는 데 필요한 절차를 묘사한다.내가 이 글을 쓴 것은 아직 틀이 달린 이야기책을 어떻게 사용하는지에 관한 공식 문서가 없기 때문이다.우리들은 몇 가지 기본 지식부터 시작합시다.
거푸집
Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser.
Stencil은 "가장 유행하는 프레임워크의 가장 좋은 개념을 간단한 구축 시 도구에 통합시킵니다."이 도구는 다음과 같은 기능을 제공합니다.
템플릿 초기화
본 프레젠테이션 프로젝트의 토대가 될 새로운 몰드 프로젝트를 만들겠습니다GitHub.
npm init stencil
component starter를 선택했습니다.? Pick a starter › - Use arrow-keys. Return to submit.
ionic-pwa Everything you need to build fast, production ready PWAs
app Minimal starter for building a Stencil app or website
❯ component Collection of web components that can be used anywhere
my-component.tsx를 좀 더 복잡하게 수정합니다.export interface CompOption {
value: string;
displayText: string;
}
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true,
})
export class MyComponent {
/**
* The text which is shown as label
*/
@Prop() label: string;
/**
* Is needed to reference the form data after the form is submitted
*/
@Prop({ reflect: true }) name: string;
/**
* If true, the button is displayed as disabled
*/
@Prop({ reflect: true }) disabled = false;
/**
* Define the available options in the drop-down list
*/
@Prop() options: CompOption[] = [];
render() {
return (
<div>
<label htmlFor={this.name}>{this.label}</label>
<select name={this.name} id={this.name} disabled={this.disabled}>
{this.options.map(o => (
<option value={o.value}>{o.displayText}</option>
))}
</select>
</div>
);
}
}
금형 웹 구성 요소 실행하기
프레젠테이션 어셈블리를 로컬에서 테스트할 수 있도록 조정
src/index.html이 필요합니다. 몰드를 사용하기 시작하면 다음과 같이 조정해야 합니다.<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<title>Stencil Component Starter</title>
<script type="module" src="/build/ui-kit.esm.js"></script>
<script nomodule src="/build/ui-kit.js"></script>
</head>
<body>
<my-component
id="my-comp"
label="Label"
name="MyComp"
disabled="false"
></my-component>
</body>
<script>
document.getElementById('my-comp').options = [
{
value: 'Item 1',
displayText: 'Item 1',
},
{
value: 'Item 2',
displayText: 'Item 2',
},
{
value: 'Item 3',
displayText: 'Item 3',
},
];
</script>
</html>
npm run start-stencil 을 통해 우리의 프레젠테이션 구성 요소를 로컬 테스트할 수 있습니다. 이것은 금형에서 자동으로 생성된 npm 스크립트입니다.이제 구성 요소가 http://localhost:3333에 표시되어야 합니다.
npm 등록표 구축 및 배치
다음 단계는 npm 등록표에 우리의 구성 요소를 배치하는 것입니다.이 시연에서 나는 Verdaccio를 사용했는데 이것은'경량급 개원 사유 npm 대리 등록표'이다.우선 전 세계적으로 설치해야 한다
npm install -g verdaccio
▶ verdaccio
warn --- config file - /Users/mhoffman/.config/verdaccio/config.yaml
warn --- Verdaccio started
warn --- Plugin successfully loaded: verdaccio-htpasswd
warn --- Plugin successfully loaded: verdaccio-audit
warn --- http address - http://localhost:4873/ - verdaccio/4.12.0
http://localhost:4873/에 로컬 npm 등록표가 있기 때문에 npm에 이 등록표를 사용하라고 알려야 한다. 예를 들어 수정.npmrc을 통해:registry=http://localhost:4873
npm adduser --registry http://localhost:4873
npm pack
npm publish
http://localhost:4873/에서 볼 수 있습니다.
현재, 우리는 모든 npm 등록표에 배치할 수 있는 금형 웹 구성 요소 라이브러리를 가지고 있다.다음 단계는 Storybook을 저장소에 통합하는 것입니다.
이야기책
Storybook is an open source tool for developing UI components in isolation for React, Vue, Angular, and more
Storybook의 전형적인 용례는 웹 구성 요소 라이브러리의 시각적 표시이다.허락
개발자나 디자이너는 현재 사용할 수 있는 구성 요소와 그들의 외관과 행동을 볼 수 있다.
인트 스토리북
몰드 어셈블리가 웹 어셈블리로 컴파일되므로 프로젝트 유형Storybook for HTML을 사용할 수 있습니다.
npx -p @storybook/cli sb init -t html
스토리북 실행 및 구축
지금
npm run storybook를 실행하면 자동으로 생성된 구성 요소와 스토리가 있는 브라우저 창이 http://localhost:6006에 열립니다.
이제
<my-component> 웹 구성 요소를 보여주기 위한 이야기를 쓰겠습니다.export default {
title: 'Demo/MyComponent',
argTypes: {
label: { type: 'text', description: 'The text which is shown as label' },
name: {
type: 'text',
description:
'Is needed to reference the form data after the form is submitted',
},
disabled: {
type: 'boolean',
description: 'If true, the button is displayed as disabled',
defaultValue: { summary: false },
},
},
};
const defaultArgs = {
disabled: false,
};
const Template = args => {
return <my-component {...args}></my-component>;
};
export const MyComponent = Template.bind({});
Default.MyComponent = { ...defaultArgs };
이야기책의 구성 요소 속성입니다.기본값과 설명도 추가했습니다.
그러나 불행하게도 우리는 이야기책에서 우리의 구성 요소를 볼 수 없기 때문에 프로젝트 설정에 대해 진일보한 조정이 필요하다.
우선, 웹 패키지의 의존 관계도에 포함시키기 위해
.storybook/preview.js에 웹 구성 요소를 불러오고 등록해야 합니다.이 JavaScript 코드는 각 스토리북의 스토리 미리 보기 캔버스에 추가되므로 웹 패키지 구성에 사용할 수 있습니다.import { defineCustomElements } from '../dist/esm/loader';
defineCustomElements();
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
};
npm add -D @storybook/react
my-component.stories.js:import React from 'react';
import MyComponent from '../../../dist/collection/components/my-component/my-component';
export default {
title: 'Demo/MyComponent',
component: MyComponent,
argTypes: {
label: { type: 'text', description: 'The text which is shown as label' },
name: {
type: 'text',
description:
'Is needed to reference the form data after the form is submitted',
},
disabled: {
type: 'boolean',
description: 'If true, the button is displayed as disabled',
defaultValue: { summary: false },
},
},
};
const defaultArgs = {
disabled: false,
};
const Template = args => {
return <my-component {...args}></my-component>;
};
export const Default = Template.bind({});
Default.args = { ...defaultArgs };
"scripts": {
"build-stencil:watch": "stencil build --docs-readme --watch --serve",
"start-storybook": "start-storybook -p 6006 -s dist"
},
--watch 로고를 사용하여 Stencil의 구축 과정을 실행하면 esm/loader.mjs 파일에서 인용한 preview.js 파일로 정확한 출력을 생성합니다.Storybook에 Stencil build 명령으로 생성된 dist 폴더를 사용하고 캐시 메커니즘을 비활성화하라고 알려주기만 하면 됩니다.만약 우리가 현재 단독 단말기에서
build-stencil:watch를 실행하고 start-storybook를 실행한다면 우리는 이야기책에서 우리의 구성 요소를 볼 수 있다.
현재 금형 웹 구성 요소를 수정할 수 있습니다. 다시 불러오기 때문에 Storybook에서 변경 사항을 바로 볼 수 있습니다.
속성 설정 옵션을 어떻게 사용하는지 알고 싶을 수도 있습니다.
setTimeout의 템플릿 함수에서 my-component.stories.js를 사용하면 구성 요소가 로드되었는지 확인할 수 있습니다.const Template = args => {
args.id = args.id ? args.id : 'my-component';
setTimeout(() => {
document.getElementById(args.id).options = [
{
value: 'Item 1',
displayText: 'Item 1',
},
{
value: 'Item 2',
displayText: 'Item 2',
},
{
value: 'Item 3',
displayText: 'Item 3',
},
];
});
return <my-component {...args}></my-component>;
};
이야기책을 배치하다
마지막으로, 우리는 Storybook을 공공 URL에 배치하기를 희망하기 때문에 storybook-deployer를 사용합니다. 이것은 GitHub 페이지나 AWS S3에 배치하는 좋은 방법을 제공합니다.이 도구를 설치하여 AWS S3에 배포합니다.
npm i @storybook/storybook-deployer --save-dev
package.json에 새 스크립트를 추가합니다. "scripts": {
"build-storybook": "build-storybook -o ./distStorybook",
"predeploy-storybook": "npm run build-storybook",
"deploy-storybook": "storybook-to-aws-s3 --existing-output-dir ./distStorybook --bucket-path <AWS_BUCKET_PATH>",
},
build-storybookaspre script를 사용하여 완성되었습니다.당신의 것을 확보해야 합니다 AWS S3 has public access allowed.예를 들어 제 프레젠테이션 항목은 http://mokkapps-stencil-storybook-demo.s3-website.eu-central-1.amazonaws.com에 있습니다.
결론
템플릿과 이야기책을 결합하는 것은 좀 까다롭지만, 이 주제에 관한 공식 문서가 있으면 좋겠다.
그러나 나는 이것이 가치가 있다고 생각한다. 게다가 Storybook의 특성 때문에 로컬 구성 요소의 개발도 개선할 수 있다.
프레젠테이션 항목의 코드는 GitHub에서 얻을 수 있습니다.
만약 당신이 이 글을 좋아한다면, 나를 주목하고, 나의 새로운 블로그 댓글과 더 많은 내용을 이해하세요.
Reference
이 문제에 관하여(하나의 저장소에서 금형과 이야기책을 운행, 구축, 배치하다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mokkapps/run-build-deploy-stencil-and-storybook-from-one-repository-14cf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
