配置汇总以将文件扩展名添加到 import/require 语句中答案

【问题标题】：Configure Rollup to add file extensions into import/require statements配置汇总以将文件扩展名添加到 import/require 语句中
【发布时间】：2022-01-07 23:56:52
【问题描述】：

我有一个用 Typescript 编写的混合 cjs/esm 节点包。

它由两个文件组成——core.ts 和extra.ts，我想将它们分开。 extra.ts 导入 core.ts（字面意思是 import { ... } from './core';），它们是包的单独入口点。客户端仅导入 core.ts 或同时导入两者。

Rollup 可以轻松地为多个入口点、多种输出格式创建构建步骤，一切看起来都很好。

但现在我遇到了一个问题：

假设我有 example.mjs 或 example.cjs 导入或需要 my-package 和 my-package/extra 入口点。

这行不通。错误信息略有不同但含义相同——读取extra.mjs/cjs时找不到./core模块。

由 Rollup 构建的 extra.cjs 包含行 var core = require('./core');
由 Rollup 构建的 extra.mjs 包含行 import { ... } from './core';

默认情况下，Node 12 不会猜测文件扩展名（我没有对此提出质疑）。

我必须将其称为 node --experimental-modules --es-module-specifier-resolution=node ./example.mjs 才能使其正常工作。这是不令人满意的解决方案。我需要 example.mjs 在没有额外标志的情况下运行。

在我看来，文件扩展名可以而且应该添加到已编译的 cjs/mjs 文件中的 import/require 语句中，以使其按照规范工作。

虽然，由于我在 Rollup 配置中为这两个文件和 external: ['./core'] 在 extra.ts 的选项中有不同的构建步骤，但对于 Rollup，它们完全不相关。否则 Rollup 只会将它们捆绑到一个文件中，这也不是我需要的。

那么问题来了：

是否有插件或配置选项可以使 Rollup 生成具有正确本地导入的文件（根据格式添加到本地导入的文件扩展名）？
如果没有现有解决方案，在构建过程中添加额外步骤以修补导入的最佳方法是什么？
也许有不同的捆绑器可以用于相同的任务？

【问题讨论】：

标签： node.js typescript es6-modules commonjs rollupjs

【解决方案1】：

得到了满意的解决方案。

output.preserveModules 选项将所有文件分开，同时一次构建它们（但在某些方面可能会受到限制）。

output.entryFileNames 选项允许指定文件扩展名。（它不适用于被认为是外部的模块，如果没有 preserveModules 就不能使用它。）

我只能构建extra.ts，因为它会导入所有其他文件。但是在像这样构建时我必须注意摇树 - 需要保留core.ts的所有导出。

export default [
  {
    external: [],
    input: 'src/extra.ts',
    treeshake: false,
    plugins: [
      typescript(),
      cleanup({ extensions: ['ts'] })
    ],
    output: [
      {
        dir: 'lib',
        format: 'es',
        preserveModules: true,
        entryFileNames: '[name].mjs',
      },
      {
        dir: 'lib',
        format: 'cjs',
        preserveModules: true,
        entryFileNames: '[name].cjs',
      },
    ],
  },
];

后退一步，我得到了另一个由core.ts 和extra.ts 导入的ts 文件的输出文件。我想我可以忍受。

理想的解决方案需要在我的初始配置中构建后使用类似 sed 的工具对输出文件进行猴子修补。

【讨论】：