Core: ES modules output target for iframe-webpack-config

Is your feature request related to a problem? Please describe. The problem is that certain browser standards (specifically, Custom Elements) need native ES2015 classes to work properly. Otherwise, when transpiled to ES5, special shim is needed to prevent issues like #3497 to happen. This is actually already used by @storybook/polymer: https://github.com/storybooks/storybook/blob/bbcbf7c4d41b979498c0dafc260d24b4c2dc2d94/app/polymer/src/client/preview/globals.js#L2

At the same time, Chrome, Safari and Firefox support ES modules natively, and the tools like Vue CLI already allow to produce “modern” and “legacy” builds to serve module and nomodule bundles. Same set of browsers also natively supports Custom Elements specification (+ hopefully Edge soon).

What I’m suggesting is to integrate the webpack plugin which our team has been evaluating and it generally solves the described problem really well, especially when using with HtmlWebpackPlugin.

Describe the solution you’d like Use webpack-babel-multi-target-plugin to provide ES module bundle for evergreen browsers supporting modules, and nomodule bundle as a fallback for older browsers.

Describe alternatives you’ve considered The custom plugin could be implemented for using in Storybook only, but that’s like extra effort.

Are you able to assist bring the feature to reality? I can help with integrating the plugin as I mentioned in https://github.com/storybooks/storybook/issues/4958#issuecomment-462071607 But I would need some guidance from the maintainers.

Additional context I have created a very basic example of using webpack-babel-multi-target plugin here: https://github.com/web-padawan/webpack-wc-demo

This will fix #3497 and will make implementation of #4958 a very straightforward task.

[daKmoR]

another benefit of this would be that currently if you have any es6 code in your node_modules then it does not get transpiled as there is an exclude for all inside node_modules…

using above mentioned plugin also goes through each package and checks if it needs transpilation and applies it if needed (e.g. there is a “module” in package.json)

So there would be no global exclude for node_modules anymore… (which currently requires some strange workarounds with regex and stuff 🙈)

[stale[bot]]

Hey there, it’s me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!