Currently, I am in the process of bundling a Vue component library using TypeScript and vue-property-decorator. The library consists of multiple Vue components and a plugin class imported from a separate file:
import FormularioForm from '@/FormularioForm.vue'
import FormularioInput from '@/FormularioInput.vue'
import FormularioGrouping from '@/FormularioGrouping.vue'
While the test suite (vue-cli + jest) runs smoothly with all tests passing, I encounter an issue during the build stage with rollup's module path resolution. It seems that the code for the components is not included in the final build output.
Here's a glimpse into my rollup configuration:
import autoExternal from 'rollup-plugin-auto-external'
import buble from '@rollup/plugin-buble'
import commonjs from '@rollup/plugin-commonjs'
import { terser } from 'rollup-plugin-terser'
import typescript from '@rollup/plugin-typescript'
import vue from 'rollup-plugin-vue'
export default {
input: 'src/index.ts',
output: [{
name: 'Formulario',
exports: 'default',
globals: {
'is-plain-object': 'isPlainObject',
'is-url': 'isUrl',
'nanoid/non-secure': 'nanoid',
},
sourcemap: false,
}],
external: ['nanoid/non-secure'],
plugins: [
commonjs(),
autoExternal(),
typescript({ sourceMap: false }),
vue({
css: true,
compileTemplate: true
}),
buble({
objectAssign: 'Object.assign',
}),
terser(),
]
}
Additionally, here is a snippet from my tsconfig.json file:
{
"compilerOptions": {
"target": "es2015",
"module": "es2015",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.js",
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}