teambit / envs

Component development environments for the Bit community
https://bit.dev/bit/envs
Other
63 stars 9 forks source link

Vue compiler with ESM bundle #165

Open benmandr opened 3 years ago

benmandr commented 3 years ago

Description

bit.envs/compilers/vue@0.1.13 is based on vue-cli-service build with --target lib, and it uses Webpack, which doesn't output ESM (as defined in Vue docs, there are only common.js and umd bundles). This is fine until we have only one component which is in the bundle. But I need to have a library which has main file in a format similar like this: image And consume like this: image

This allows to have named exports in the consumer project, allows installing the whole library with one npm install and import what you need. Problem is that when the project is built, it is not tree-shaken, and every component is included in the bundle, even if it is unused (due to build having only common.js bundle)

Describe the solution you'd like

I believe a separate Vue compiler, which has all the features the current has, but is based on Rollup with additional output target of ESM, would be amazing. This would allow to easily have a Vue component library which can be installed in one line, imported with named-exports and be tree-shakeable as well.

Describe alternatives you've considered

The only alternative I see is to bundle each component separately and export them separately, but, in that case, the package.json gets overhauled by each component, if, let's say, you have 100 of them. Then there is 100 lines of dependencies in package.json, which is just ugly. Also, you need to import each used component with a new import statement, which also doesn't seem intuitive. In my opinion - Vue Rollup compiler is the best way to go for this.

Additional context