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:
And consume like this:
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.
Description
bit.envs/compilers/vue@0.1.13
is based onvue-cli-service build
with--target lib
, and it uses Webpack, which doesn't output ESM (as defined in Vue docs, there are onlycommon.js
andumd
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: And consume like this: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 onlycommon.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