typescript - Rollup TypeScript：dist + cjs + es 中的声明

问题描述

我正在尝试使用带有声明（d.ts）文件的汇总来打包 TypeScript 库，并且我想同时输出 cjs 和 es 版本。

所以我想出了这个汇总配置：

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,
        },
    }
}

这会产生很好的输出，但只能编译为 cjs：

因此，我尝试通过如下更改来输出两种格式output：

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

.d.ts但是现在我得到了两个我不想要的文件副本：

那么我如何获得一份d.ts 文件的副本以及一个 cjs 和 es 构建？

标签： typescriptrollup

我已将汇总配置为将单个文件发送到，然后使用脚本dist/index.d.ts将 my 的内容附加到其中：declarations.d.tspostbuild

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

这是我的内容rollup.config.js：

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()
  ]
};

我希望这可以帮助任何寻找解决方案的人。

typescript - Rollup TypeScript：dist + cjs + es 中的声明

问题描述

解决方案

推荐阅读