I'm trying to create a vue sfc components library written in TypeScript, to use in other projects just installing it and importing it in the sfc with the syntax "import {component} from ..", without the need of the Vue.use(). I'd prefer it to be compiled in es5, to contain type declarations and to be as scalable as possible (it could contain more than 100 components and I don't want a single bundle). I've tried with different methods, webpack, vue-cli 3, vue-sfc-rollup, and rollup, and the last one seams to be the closer one to the result I'd prefer. The final package is so structured:
dist/
|__@types/
| |__SampleComponent/
| | |__SampleComponent.vue.d.ts
| |__index.d.ts
|
|__node_modules/
| |__vue-runtime-helpers/ (contains normalize-component.mjs.js)
|
|__src/
|__SampleComponent/
| |__SampleComponent.vue.js
| |__SampleComponent.vue_rollup-plugin-vue=script.js
|__index.js (wrapper file)
Problem is that, as I said, .js files aren't compiled in es5 but cjs (rollup can't), the components' .js is split in 2 files and I can't leave outside the node-modules folder, seams to need the normalize-component. These are my config files:
rollup.config.js
import vue from "rollup-plugin-vue"
import typescript from "rollup-plugin-typescript2"
import renameExtensions from "@betit/rollup-plugin-rename-extensions"
import cleaner from "rollup-plugin-cleaner"
import commonjs from "rollup-plugin-commonjs"
import resolve from '@rollup/plugin-node-resolve';
// import del from 'rollup-plugin-delete'
import css from 'rollup-plugin-css-porter';
import sass from 'rollup-plugin-sass';
// import {terser} from "rollup-plugin-terser";
export default {
input: "./src/index.ts",
output: {
format: "cjs", // This is what tells rollup to use ES6 modules
dir: "dist",
sourcemap: true
},
external: ["vue", "vue-class-component", "vue-property-decorator", "tslib", "vue-runtime-helpers"],
plugins: [
cleaner({targets: ["dist"]}),
resolve(),
// This extension renames all .vue and .ts to .js
// (and updates the imports)
renameExtensions({
include: ["**/*.ts", "**/*.vue"],
mappings: {".vue": ".vue.js", ".ts": ".js"}
}),
vue({
css: true, // Dynamically inject css as a <style> tag
compileTemplate: true, // Explicitly convert template to render function
}),
typescript({
clean: true,
useTsconfigDeclarationDir: true
}),
commonjs(),
sass(),
css(),
/*terser({
output: {
ecma: 5,
},
}),*/ // minifies generated bundles
/*del({
targets: 'dist/index.d.ts',
hook: 'generateBundle'
})*/
],
// Prevents bundling, but doesn't rename files
preserveModules: true
}
package.json
import vue from "rollup-plugin-vue"
import typescript from "rollup-plugin-typescript2"
import renameExtensions from "@betit/rollup-plugin-rename-extensions"
import cleaner from "rollup-plugin-cleaner"
import commonjs from "rollup-plugin-commonjs"
import resolve from '@rollup/plugin-node-resolve';
// import del from 'rollup-plugin-delete'
import css from 'rollup-plugin-css-porter';
import sass from 'rollup-plugin-sass';
// import {terser} from "rollup-plugin-terser";
export default {
input: "./src/index.ts",
output: {
format: "cjs",
dir: "dist",
sourcemap: true
},
external: ["vue", "vue-class-component", "vue-property-decorator", "tslib", "vue-runtime-helpers"],
plugins: [
cleaner({targets: ["dist"]}),
resolve(),
// This extension renames all .vue and .ts to .js
// (and updates the imports)
renameExtensions({
include: ["**/*.ts", "**/*.vue"],
mappings: {".vue": ".vue.js", ".ts": ".js"}
}),
vue({
css: true, // Dynamically inject css as a <style> tag
compileTemplate: true, // Explicitly convert template to render function
}),
typescript({
clean: true,
useTsconfigDeclarationDir: true
}),
commonjs(),
sass(),
css(),
/*terser({
output: {
ecma: 5,
},
}),*/ // minifies generated bundles
/*del({
targets: 'dist/index.d.ts',
hook: 'generateBundle'
})*/
],
// Prevents bundling, but doesn't rename files
preserveModules: true
}
tsconfig.json
{
"compilerOptions": {
"module": "ES2015",
"target": "es5",
"downlevelIteration": true,
"resolveJsonModule": true,
"importHelpers": true,
"moduleResolution": "node",
"sourceMap": true,
// "outFile": "out.js",
"declaration": true,
"outDir": "./dist/lib",
"declarationDir": "./dist/@types",
"strict": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"types": [
"node"
],
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
],
"plugins": [
{
"name": "typescript-tslint-plugin"
}
]
},
"include": [
// Source
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
// Tests
"tests/**/*.ts",
"tests/**/*.tsx",
"src/browser/**/*.ts",
"src/site/images/typings.d.ts",
"src/site/images"
],
"exclude": [
"node_modules"
],
"files": [
"src/shims-vue.d.ts"
]
}
Sorry in advance if my explanation is not clear enough and if my configurations are chaotic. Thanks