Storybook for EJS

EJS 수요가 없어서 그런지 정보를 찾아도 찾을 수 없어서 여러 가지 설치부터 스토리북을 표시하는 노트까지.
견본
Storybook

디렉토리 구성

├ .storybook
│  ├ config.js
│  └ webpack.config.js
└ src
   ├ components
   │  └ button.ejs
   └ stories
      └ button.stories.js

최소 소프트웨어 패키지 및 EJS 로더 설치

기본적으로 문서의 https://github.com/nishinoshake/storybook-ejs-example에 따라 진행된다.
EJS 로드가 필요하기 때문에 추가되었습니다.

npm install --save-dev @storybook/html babel-loader @babel/core ejs-compiled-loader

package.json

{
  "scripts": {
    "storybook": "start-storybook"
  }
}

스토리 가져오기 설정

.storybook/config.js

import { configure } from '@storybook/html'

function loadStories() {
  const req = require.context('../src/stories', true, /\.stories\.js$/)
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

EJS 로더 구성

.storybook/webpack.config.js

const path = require('path')

module.exports = async ({ config }) => {
  config.module.rules.push({
    test: /\.ejs$/,
    loaders: ['ejs-compiled-loader'],
    include: path.resolve(__dirname, '../src/components')
  })

  return config
}

Storybook for HTML

EJS 어셈블리 생성하기

src/components/button.ejs

<button><%=label%></button>

스토리 만들기

src/stories/button.stories.js

import { storiesOf } from '@storybook/html'
import buttonTemplate from '../components/button.ejs'

storiesOf('Button', module)
  .add('with text', () => buttonTemplate({ label: 'Button！' }))

확인

참고: 사용자 정의 Webpack Config

npm run storybook

예제 코드

샘플이지만 GitHub를 위한 것이므로 참고 사항입니다.

참고 자료

https://github.com/nishinoshake/storybook-ejs-example

Storybook for HTML