Rollup TypeScript: khai báo trong dist + cjs + es

Tôi đang cố gắng đóng gói một thư viện TypeScript bằng rollup với các tệp khai báo (d.ts), và tôi muốn xuất cả hai phiên bản cjs và es.

Vì vậy tôi đã đưa ra cấu hình rollup này:

const {nodeResolve} = require('@rollup/plugin-node-resolve')
const nodeExternals = require('rollup-plugin-node-externals');
const json = require('@rollup/plugin-json');
const commonjs = require('@rollup/plugin-commonjs');
const typescript = require('rollup-plugin-typescript2');
const packagePlugin = require('@mpen/rollup-plugin-package');
const cleanPlugin = require('@mpen/rollup-plugin-clean');
const findUp = require('find-up');
const {readFileSync} = require('fs');

module.exports = function rollupPresetTslib(opts = {}) {
    const tsconfigFile = findUp.sync(opts.tsconfig ?? 'tsconfig.json')
    const tsconfig = JSON.parse(readFileSync(tsconfigFile))

    return {
        input: tsconfig.files,
        plugins: [
            commonjs({
                include: 'node_modules/**',
            }),
            nodeExternals({
                builtins: true,
                deps: true,
                devDeps: false,
                peerDeps: true,
                optDeps: false,
            }),
            json(),
            typescript({
                abortOnError: process.env.NODE_ENV === 'production',
                tsconfig: tsconfigFile,
                ...opts.typescriptOptions,
            }),
            nodeResolve({
                extensions: ['.ts', '.json']
            }),
            packagePlugin(),
            cleanPlugin(),
            ...opts.plugins ?? [],
        ],
        watch: {
            buildDelay: 200,
            ...opts.watch,
        },
        preserveSymlinks: true,  // https://www.npmjs.com/package/@rollup/plugin-commonjs#usage-with-symlinks
        preserveModules: false,  // outputs multiple files
        output: {
            dir: 'dist',
            format: 'cjs',
            sourcemap: true,
            inlineDynamicImports: false,
        },
    }
}

Điều này tạo ra kết quả khá tốt nhưng chỉ biên dịch sang cjs:

Vì vậy tôi đã thử xuất ra cả hai định dạng bằng cách thay đổi output như sau:

        output: ['cjs', 'es'].map(format => ({
            dir: `dist/${format}`,
            format: format,
            sourcemap: true,
            inlineDynamicImports: false,
        })),

Nhưng bây giờ tôi nhận được hai bản sao của các tập tin .d.ts mà tôi không muốn:

Vậy làm thế nào để tôi có một bản sao của các tệp d.ts cùng với bản build cjs và es?

Câu trả lời #1

Tôi đã cấu hình rollup để phát ra một tệp duy nhất vào dist/index.d.ts, nối nội dung của declarations.d.ts của tôi vào đó bằng cách sử dụng một script postbuild:

cat declarations.d.ts >> dist/index.d.ts

Đây là nội dung của rollup.config.js của tôi:

import commonjs from '@rollup/plugin-commonjs';
import clear from 'rollup-plugin-clear';
import ts from 'rollup-plugin-ts';
import styles from 'rollup-plugin-styles';
import image from '@rollup/plugin-image';
import { builtinModules } from 'module';
import pkg from './package.json';

module.exports = {
  input: pkg.source,
  output: [
    { file: pkg.main, format: 'cjs', sourcemap: true },
    { file: pkg.module, format: 'esm', sourcemap: true }
  ],
  external: [
    ...builtinModules,
    ...(pkg.dependencies ? Object.keys(pkg.dependencies) : []),
    ...(pkg.devDependencies ? Object.keys(pkg.devDependencies) : []),
    ...(pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [])
  ],
  watch: {
    include: 'lib/**'
  },
  plugins: [
    clear({
      targets: ['dist'],
      watch: false
    }),
    ts({
      hook: {
        // Always rename declaration files to index.d.ts to avoid emitting two declaration files with identical contents
        outputPath: (path, kind) =>
          kind === 'declaration' ? './dist/index.d.ts' : path
      }
    }),
    image(),
    styles({
      modules: true,
      autoModules: /\.module\.\S+$/
    }),
    commonjs()
  ]
};

Tôi hy vọng điều này giúp được bất kỳ ai đang tìm kiếm một giải pháp.