Add typings of react-table library to the build using rollup

364 views Asked by At

I want to be able to include react-table typings in the build using rollup module bundler so that external applications using my custom library don't have to include the typings in their applications. Right now it doesn't include external libraries typings in the bundle. I've tried rollup-plugin-copy to copy over the specific typings file to the destination, but wanted to know if there is a better way of doing it

Here is my tsconfig.json file

{
"compilerOptions": {
    "rootDirs": ["src/components", "src/widgets", "src/utils"],
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "plugins": [
        {
            "name": "typescript-tslint-plugin"
        }
    ],
    "outDir": "dist/",
    "sourceMap": true,
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react",
    "declaration": true,
    "baseUrl": ".",
    "paths": {
        "scss/*": ["../scss"]
    }
},
"include": ["src"],
"exclude": ["node_modules", "src/**/*.stories.tsx", "src/**/*.spec.tsx"]
}

And here is my rollup.config.js file

const path = require('path');
import typescript from '@rollup/plugin-typescript';
import postcss from 'rollup-plugin-postcss';
import alias from '@rollup/plugin-alias';
import svg from 'rollup-plugin-svg';
import copy from 'rollup-plugin-copy';

import pkg from './package.json';

const aliases = {
    scss: path.resolve(__dirname, '../', 'scss'),
    node_modules: path.resolve(__dirname, './node_modules')
};
const copyConfig = {
    targets: [
        {
            src: './src/components/data/types/react-table/index.d.ts',
            dest: './dist/components/data/react-table/'
        }
    ]
};

export default {
    input: 'src/index.ts',
    output: [
        {
            file: 'dist/index.js',
            format: 'esm'
        }
    ],
    external: [
        ...Object.keys(pkg.dependencies || {}),
        ...Object.keys(pkg.peerDependencies || {})
    ],
    plugins: [
        copy(copyConfig),
        typescript(),
        postcss({
            extract: false,
            modules: false
        }),
        alias({ resolve: ['.scss'], entries: aliases }),
        svg()
    ]
};

Any help would be appreciated

0

There are 0 answers