IE11でStorybookを動かす

syntax errorの解消

そのままだとsyntax errorでプレビューが動かないので.babelrcでpresetを指定する。

{
  "presets": ["es2015"]
}

作成場所はルートに。

この.babelrcが読み込めている場合、起動時に次のようなログが出る

@storybook/vue v3.2.16

=> Loading custom .babelrc
=> Loading custom addons config.
=> Using default webpack setup based on "vue-cli".
  0% compiling

HMRを効かす

IE11にEventSourceがないので、polyfillを追加したい。

webpackのconfigをいじればなんかうまくできるんだろうけど、めんどくさいのでcdn経由でEventSourceのpolyfillを読み込ませる。

読み込ませるのはカスタムヘッダで。

https://storybook.js.org/configurations/add-custom-head-tags/

.storybook/preview-head.html を作成する。scriptが書けるのでpolyfillを指定する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/event-source-polyfill/0.0.9/eventsource.js"></script>

works fine 👍