在 TypeScript 中导入 js 文件而不将其与 Rollup 捆绑在一起

Question

我有一个简单的 TypeScript + Rollup 配置，请参阅 minimal working example here。

文件夹结构如下：

src/mwe.ts
vendor/verovio.js    <-- library, that I would like to use
vendor/verovio.d.ts  <-- content (for now): declare module 'verovio'

现在我正在尝试在 mwe.ts:

中使用 verovio.js

import * as verovio from '../vendor/verovio.js'

export default class DummyClass {
  constructor() {
    let foo: any = new verovio.toolkit()
  }
}

我的目标是在执行 js 编译器和 Rollup 时，将 js 库简单地复制到 dist 文件夹中，而不是捆绑到我自己的库中。我根本不知道该怎么做。据我所知，这里的问题包括两件事：

类型定义处理不正确：error TS2306: File '[...]/mwe/vendor/verovio.d.ts' is not a module.
Rollup 不知道如何正确处理 js 文件。

Answer 1

您正在尝试将文件作为模块加载。与其直接指定 JS 文件，不如让编译器知道 .d.ts 文件（例如通过 tsconfig.json 或直接通过导入），然后简单地导入模块。

import '../vendor/verovio';
import * as verovio from 'verovio';

export default class DummyClass {
  constructor() {
    let foo: any = new verovio.toolkit()
  }
}

我在 https://github.com/sonovice/mwe-ts-verovio-import/pull/1 向您发送了一个拉取请求，它执行此操作并根据供应商库的文档更新了类型。我还编辑了 Rollup 配置以复制供应商库，但这并不理想，因为您的库不会 require() 供应商库。最好将其指定为依赖项并让模块加载器处理 require()。

在 TypeScript 中导入 js 文件而不将其与 Rollup 捆绑在一起

Import js file in TypeScript without bundling it with Rollup

typescript

rollupjs

typescript-typings