rollup esm 和 umd 构建，使用 typescript 插件和声明，不可能吗？

Question

我想使用 rollup 来构建我的库的两个版本，一个 UMD 版本以及一个非 ESM 版本

我之前使用非官方插件rollup-plugin-typescript2时的配置如下：

import typescript from 'rollup-plugin-typescript2'
import pkg from '../package.json'
export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'umd',
      name: pkg.name,
      sourcemap: true
    },
    {
      file: pkg.module,
      format: 'esm',
      sourcemap: true
    },
  ],
plugins: [
    typescript({
        tsconfig: "src/tsconfig.json",
        useTsconfigDeclarationDir: true
    }),
  ],
}

在我的 json 包中我有：

  (...)
  "scripts": {
    "build": "rollup -c ./scripts/dist.js",
  },
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "files": [
    "dist"
  ],
  (...)

在我的 tsconfig.json 中我有：

  (...)
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
    "declaration": true,
    "declarationDir": "./dist/@types/chrisweb-utilities",
    (...)

结果是“在 2.6 秒内创建了 dist/index.js、dist/index.esm.js”...一切都很好

创建的文件包含以下内容：

/dist
|-@types
 |-index.d.ts
|-index.js
|-index.esm.js
|-index.esm.js.map
|-index.js.map

今天我尝试使用官方插件 @rollup/plugin-typescript （因为我在其他项目中使用该插件，我只进行了一次 ESM 构建，并且它工作没有问题，并且我想通过使用相同的插件我所有的项目）

我遇到了第一个错误，因为只有 rollup-plugin-typescript2 可以理解的配置属性： “（！）插件打字稿：@rollup/plugin-typescript TS5023：未知的编译器选项‘useTsconfigDeclarationDir’。”

所以我删除了它，解决了这个问题......

但是我收到了另一个错误：“[!]（插件打字稿）错误：@rollup/plugin-typescript：指定‘outDir’时必须使用‘dir’。”

所以我将 dir 添加到我的配置中，然后看起来像这样：

import typescript from '@rollup/plugin-typescript';
import pkg from '../package.json'
export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'umd',
      name: pkg.name,
      sourcemap: true,
      dir: "dist",
    },
    {
      file: pkg.module,
      format: 'esm',
      sourcemap: true,
      dir: "dist",
    },
  ],
plugins: [
    typescript({
        tsconfig: "tsconfig.json",
    }),
  ],
}

不，出现下一个错误：“[！]错误：您必须为单文件构建设置“output.file”，或者在生成多个块时设置“output.dir”。”

实际上我什至不想生成块，我对单个文件很好，但是我删除了 dir 我又回到了之前的错误。所以我接下来尝试的是保留“dir”并删除“file”

这有效，或者至少我收到了一条成功消息：“在 2.6 秒内创建了 dist，dist”，但现在的问题是，我没有两个构建，而是只有一个“dist/index.js”，即第一个构建UMD 被 ESM 的第二个重写。

我想最后一次尝试可以，让我们在 /dist 的子文件夹中输出 UMD 版本，在另一个子文件夹中输出 ESM 版本，所以我将配置更改为：

  (...)
  output: [
    {
      format: 'umd',
      name: pkg.name,
      sourcemap: true,
      dir: "dist/umd",
    },
    {
      format: 'esm',
      sourcemap: true,
      dir: "dist/esm",
    },
  ],
  (...)

这也失败了:(这次出现以下错误：“[！]（插件打字稿）错误：@rollup/plugin-typescript：'outDir'必须位于'dir'内部。”所以我的outDir是“./dist”其中 yes 不再位于 dir: "dist/umd" 中，我在 tsconfig 中只有一个 outDir，因此它不能出现在每个汇总 output.dir 中，或者我是否错过了某些内容在这里？

哦，我实际上还尝试了其他方法，请记住之前的错误，其中 rollup 告诉我“指定 'outDir' 时必须使用 'dir'”，所以我从 tsconfig.json 中删除了 outDir ，嘿另一个汇总错误（在此我认为我遇到了所有可能的汇总错误;)）如下：“[！]（插件打字稿）错误：@rollup/plugin-typescript：'dir'必须在以下情况下使用指定了“declarationDir”。”

所以我还在 tsconfig 中注释掉了“declarationDir”...不再有错误，但这并不是真正的解决方案，因为现在我没有生成打字稿类型定义文件。

我来来回回尝试了所有组合几个小时，但到目前为止还没有运气......

所以我陷入困境，想知道是否有人可以帮助我？也许您遇到过这个或类似的问题？要么是我遗漏了某些东西，要么是一个错误，在这种情况下，我会在几天内开一张票。

Answer 1

我遇到了同样的问题，但是我更改了es的构建，而不是es的构建将js文件生成到根文件夹。

构建文件夹的结构

我的示例 rollup.config.ts：

export default defineConfig({
  input: 'src/index.ts',
  output: [
    {
      file: packageJson.main,
      format: 'cjs',
      name: packageJson.name,
    },
    {
      format: 'es',
      dir: 'dist',
      manualChunks: id => {
        const matchLibPath = id.match(nodeModulesRegex);
        if (matchLibPath) {
          const libName = matchLibPath[1];
          return libName;
        }
      },
    },
  ],
  plugins: [
    resolve(),
    commonjs(),
    typescript({
      tsconfig: './tsconfig.json',
      declaration: true,
      declarationDir: 'dist/types',
      emitDeclarationOnly: true,
    }),
    terser(),
    url({
      fileName: '[name][extname]',
      include: includePaths,
      limit: 0,
    }),
  ],
  external: [...Object.keys(packageJson.peerDependencies || {})],
});