I'm creating an icon component library that includes over 2500 React SVG components. Because the scale of the library is significant, I can't build one index.js to export all components, so I use code splitting using Rollup. I installed the library on a project to test it, but vscode IntelliSense doesn't suggest importing the component. However, I used typescript and have .d.ts files in each library folder after building by Rollup. How can I make IntelliSense suggest library components?
here is Rollup config :
import { babel } from '@rollup/plugin-babel';
import typescript from '@rollup/plugin-typescript';
import {fileAddress} from './filesAddress';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import visualizer from 'rollup-plugin-visualizer';
import { terser } from 'rollup-plugin-terser';
const config = {
input: fileAddress,
output: [{
dir: 'dist',
format: 'esm',
preserveModules: true,
preserveModulesRoot: 'icons',
sourcemap: true,
},],
plugins: [ resolve(),
commonjs(),
babel({ babelHelpers: 'bundled' }),
typescript({tsconfig:'./tsconfig.build.json',declaration:true,declarationDir: 'dist'}),
terser(),
visualizer({
filename: 'bundle-analysis.html',
open: true,
}),
]
},
export default config;
ts.config.js:
{
"compilerOptions": {
"declaration": true,
"declarationDir": "dist",
"composite": true,
"declarationMap": true,
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom", "es2016", "es2017"],
"sourceMap": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
},
"include": ["icons/**/*"],
"exclude": [
"node_modules",
"build",
"dist",
"scripts",
"acceptance-tests",
"webpack",
"jest"
],
"types": ["typePatches"]
}
and folder content after build: