如何使用 Rollup 将本地打字稿文件捆绑到主包中答案

【问题标题】：How to bundle local typescript files into main bundle using Rollup如何使用 Rollup 将本地打字稿文件捆绑到主包中
【发布时间】：2021-04-12 02:31:35
【问题描述】：

我正在尝试创建一个可以在浏览器中使用的 npm 模块。

我正在使用打字稿和汇总。

我的tsconfig.json 是：

{
  "compilerOptions": {
    "module": "CommonJS",
    "outDir": "lib",
    "strict": true,
    "rootDir": "src"
  }
}

而我的rollup.config.js 是：

import typescript from "@rollup/plugin-typescript";

export default {
  input: "src/index.ts",
  output: {
    dir: "lib",
    format: "iife",
  },
  plugins: [typescript()],
};

在src/index.ts 里面我有以下内容：

// src/index.ts
import log from './log'

const myFn = () => {
 ...myFn code
}

我的问题是在捆绑包中，我得到以下信息：

// lib/index.js bundle
var log_1 = require("./log");

当我真的想将 log 文件捆绑到主 lib/index.js 中时。

如何使用 Typescript 和汇总来做到这一点？

注意：我已尝试添加 outFile (ts docs)，但“@rollup/plugin-typescript”不支持。

我必须自己进行 tsc 编译，然后是汇总包吗？

【问题讨论】：

我仍在寻找这个问题的答案，但如果有人遇到这个问题，我实际上已经转向了 Webpack，而且要简单得多。

标签： javascript typescript npm rollup

【解决方案1】：

Rollup 需要 TypeScript 编译器来生成 ES 模块，以便正确捆绑您的代码。您需要在 tsconfig.json 中将模块格式更改为“ESNext”而不是“CommonJS”，或者在 Rollup 配置中更改 @rollup/plugin-typescript 配置：

typescript({ module: "ESNext" })

截至rollup/plugins#788，如果配置不正确，您将收到警告。

@rollup/plugin-typescript：Rollup 要求 TypeScript 生成 ES 模块。不幸的是，您的配置指定了“esnext”以外的“模块”。除非您知道自己在做什么，否则请在目标 tsconfig.json 文件或插件选项中将“module”更改为“esnext”。

【讨论】：