Provide an esm build

[danimoh]

Provide an esm build to enable tree shaking in apps importing components from this component library without the need to import all components at once. See webpack tree shaking documentation for more info.

Work and experimentation on this has already been started here.

Unfortunately, with the current state of the build tools, this goal is not achievable for our project structure (vue single file components written in typescript):

• Webpack currently does not support es6 modules as output.libraryTarget and and support is not to be expected soon.
• Rollup does support es6 modules as output format and conveniently offers a Vue plugin and typescript plugins.
• rollup-plugin-typescript does not actually perform type checking though and has issues with emit-less types like const enum and pure type definitions without an assigned value.
• rollup-plugin-typescript2 does perform actual type checking but currently has problems importing vue single file components. As soon as rollup-plugin-typescript2 is fixed, we might realize this approach.

To provide .d.ts type declarations after compilation with rollup, dts-bundle can be used. We could also keep our current approach with vue-cli-plugin-ts-bundler but rebuilding that behavior with dts-bundle should be easy.

The default for css option of rollup-plugin-vue already ensures that css styling is embedded into the components and not output as a big css file. Thus, we can benefit from tree shaking for css also.

[danimoh]

Just stumbled upon these links whcih might be interesting when we touch this issue again: https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html https://github.com/MikeMitterer/vue-ts-sfc-starter

The vue-ts-sfc-starter kit uses rollup-plugin-typescript2 in conjunction with rollup. We should check whether the author found a way around the issues described above.