I'm currently in the process of developing a component library using rollup and Vue with the goal of making it tree shakable for others who import it. The configuration setup is outlined below:
Here's a snippet from package.json
{
"name": "red-components-with-rollup",
"version": "1.0.0",
"sideEffects": false,
"main": "dist/lib.cjs.js",
"module": "dist/lib.esm.js",
"browser": "dist/lib.umd.js",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w"
},
"devDependencies": {
/* ... */
}
And this is my complete rollup.config.js
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import vue from "rollup-plugin-vue";
import pkg from "./package.json";
export default {
input: "lib/index.js",
output: [
{
file: pkg.browser,
format: "umd",
name: "red-components"
},
{ file: pkg.main, format: "cjs" },
{ file: pkg.module, format: "es" }
],
plugins: [resolve(), commonjs(), vue()]
};
I have a straightforward project structure with an index.js file and two Vue components:
root
∟ lib
∟ index.js
∟ components
∟ Anchor.vue
∟ Button.vue
∟ package.json
∟ rollup.config.js
My index.js imports the Vue files and exports them:
export { default as Anchor } from "./components/Anchor.vue";
export { default as Button } from "./components/Button.vue";
export default undefined;
If I don't include export default undefined; somehow, any application importing my library won't be able to find any exports. Strange.
Now, when I integrate my library into another app by importing red-components-with-rollup like this:
import { Anchor } from "red-components-with-rollup";
and inspect the bundle in my app, I notice that the source code of Button.vue is also included in the bundle; it hasn't been stripped out as dead code.
What could be the issue here?