Posted at

Storybook for EJS

EJSStorybookという需要がないためか、情報を探しても見つからなかったので、諸々インストールしてからStorybookを表示するまでのメモです。

サンプル

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


ディレクトリ構成

├ .storybook

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


最低限のパッケージとEJSのローダーをインストール

基本的には、ドキュメントのStorybook for HTMLに従って進めました。

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
}


参考 : Custom Webpack Config


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!' }))



確認

npm run storybook


サンプルコード

小さなサンプルですが、GitHubにあげてるので参考までに。

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


参考