Rollup-plugin-typescript2: 为什么要删除接口声明？

创建于 2017-07-19  ·  19评论  ·  资料来源: ezolenko/rollup-plugin-typescript2

你好，

我正在尝试从 webpack 移动到库的汇总，但我无法使声明正常工作。

似乎接口声明没有导出，当我有这样的事情时这是一个问题：

import { RenderedCell } from "../RenderedCell";

export default class MergedCell implements RenderedCell {
    // ...
}

我收到无法找到 RenderedCell 的错误。
我在 webpack 中工作过，我不明白我的配置有什么不同破坏了这个。 但我似乎明白使用 Rollup 是正常的。

顺便提一句。 我正在使用最新的 rollup、rollup-plugin-typescript2 和 rollup-plugin-uglify 如果需要，我可以发布我的配置

picture onigoetz

最有用的评论

对于它的价值，我只是在汇总后调用tsc --emitDeclarationOnly ，它将声明文件覆盖到构建文件夹中。
在我的 package.json 中

"scripts": {
    "build": "rollup -c",
    "postbuild: "tsc --emitDeclarationOnly"
}
picture yiochen 于 2019-01-31
👍5 ❤3 🎉3

所有19条评论

这是运行时错误还是打字稿错误？ 你能发布你如何从RenderedCell本身导出接口吗？

ezolenko picture ezolenko 于 2017-07-19

问题是该文件根本没有生成，并且在另一个项目中使用该库时失败。

onigoetz picture onigoetz 于 2017-07-20

等等，您是否期望生成RenderedCell接口？ 根据您发布的打字稿代码，您希望名为RenderedCell.ts文件存在于当前文件上方的一个目录中，并且它需要包含如下内容：

export interface RenderedCell 
{ 
    // ...
}

你能提供更多关于你的项目结构的细节吗？ （文件树、tsconfig、汇总配置等）

ezolenko picture ezolenko 于 2017-07-20

是的，我期待它被生成。

这是我的配置：

运行构建： rollup -c -f es -n sq-web-component-table -o dist/sq-web-component-table.es.min.js

我没有放整棵树，因为它是一个相当大的图书馆，而且它的噪音比信号更多。 但是你已经可以看到很多文件没有在 dist 中生成。

汇总配置文件

import typescript from 'rollup-plugin-typescript2';
import uglify from 'rollup-plugin-uglify';
import { minify } from 'uglify-es';

export default {
    entry: './src/index.ts',
    dest: 'dist/sq-web-component-table.min.js',
    sourceMap: true,

    plugins: [
        typescript(),
        uglify({}, minify)
    ]
}

配置文件

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "outDir": "dist"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "dist",
    "node_modules",
    "**/*-test.ts"
  ]
}

RenderedCell.ts

import {RenderedElement} from "./RenderedElement";
import {RenderedRow} from "./RenderedRow";
export interface RenderedCell extends RenderedElement {
    isMergedCell(): boolean;
    getColspan(): number;
    setColspan(colspan: number): void;
    getParent(): RenderedRow;
}

文件树

.
├── src
│   ├── index.ts
│   └── table
│       ├── extensions
│       │   ├── base
│       │   │   ├── FirstTableExtension.ts
│       │   │   ├── LastTableExtension.ts
│       │   │   ├── SectionDispatcher.ts
│       │   │   ├── SectionManager.ts
│       │   │   └── SizeChangeMonitor.ts
│       │   ├── InvalidateEvent.ts
│       │   ├── InvalidateSizesEvent.ts
│       │   ├── RenderedCell.ts
│       │   ├── RenderedElement.ts
│       │   ├── RenderedRow.ts
│       │   ├── RenderedSection.ts
│       │   ├── RenderedTable.ts
│       │   ├── SectionClickedEvent.ts
│       │   ├── support
│       │   │   └── ...
│       │   ├── TableAttributes.ts
│       │   ├── TableExtensionChain.ts
│       │   ├── TableExtensionList.ts
│       │   └── TableExtension.ts
│       ├── model
│       │   └── ...
│       ├── TableRenderingOptions.ts
│       ├── Table.ts
│       ├── util
│       │   └── ...
│       └── view
│           └── ...
├── dist
│   ├── index.d.ts
│   ├── sq-web-component-table.es.min.js
│   ├── sq-web-component-table.es.min.js.map
│   ├── sq-web-component-table.min.js
│   ├── sq-web-component-table.min.js.map
│   └── table
│       ├── extensions
│       │   ├── base
│       │   │   ├── FirstTableExtension.d.ts
│       │   │   ├── LastTableExtension.d.ts
│       │   │   ├── SectionDispatcher.d.ts
│       │   │   ├── SectionManager.d.ts
│       │   │   └── SizeChangeMonitor.d.ts
│       │   ├── InvalidateEvent.d.ts
│       │   ├── InvalidateSizesEvent.d.ts
│       │   ├── RenderedRow.d.ts
│       │   ├── SectionClickedEvent.d.ts
│       │   ├── support
│       │   │   └── ...
│       │   ├── TableAttributes.d.ts
│       │   └── TableExtensionList.d.ts
│       ├── model
│       │   └── ...
│       ├── Table.d.ts
│       ├── util
│       │   └── ...
│       └── view
│           └── ...
├── node_modules
│   └── ...
├── __tests__
│   └── ...
├── package.json
├── rollup.config.js
└── tsconfig.json

onigoetz picture onigoetz 于 2017-07-21

啊，我明白了。 lib开源有机会吗？

尝试使用这些选项构建：

typescript({ verbosity: 2, clean: true }),

检查是否正在处理您期望的所有文件。 如果声明突然开始生成，那么某处存在缓存问题。

如果输出 ( rpt2: transpiling '...' ) 中未提及 RenderedCell.ts，请将详细程度增加到 3 并检查应该导入它的文件是否正在执行此操作。 你应该看到类似的东西

rpt2: resolving '../RenderedCell'
rpt2:     to '...'

如果问题不明显，我会在某处添加更多日志记录。

ezolenko picture ezolenko 于 2017-07-21

我很乐意，可能在未来:)

谢谢你的技巧，我会在星期一试试这个。

onigoetz picture onigoetz 于 2017-07-21

如果您在 tsconfig 的 compilerOptions 部分设置declaration: false并重新编译，问题会消失吗？ 如果是，TSC 报告的错误是否与 dist 目录中的文件之一有关？ 如果您对两者的回答都是“是”，那么如果您向包含RenderedCell文件的文件（例如简单函数的导出）引入一些非类型逻辑，错误是否会消失？ 如果是，则原因是包含RenderedCell被认为是未使用的，并且 Typescript 永远不会为其准备声明。

如果所有这些都适用于您，我会看到 2 个选项：

  • 停止为您的包生成声明。
  • 确保汇总不会通过对与类型无关的文件进行更改来完全删除文件。 是的，这是一个黑客，我希望我们找到一种方法做得更好
wessberg picture wessberg 于 2017-07-27

你好，

抱歉耽搁了很长时间，我尝试了您的提示和技巧，但仍然无法获得生成的接口的类型定义。

我将配置更改为typescript({ verbosity: 3, clean: true }) 。
在生成的构建的输出中，没有提到RenderedCell接口。

我 100% 确定需要这个文件，因为库的index.d.ts直接需要它，并且生成了接口以外的所有文件，但接口仍在index.d.ts的导入中文件。

我将深入研究代码，看看是否存在不生成这些文件的特殊原因。

@wessberg停止为我的包生成声明不是一个选项，因为这是一个库，它是一个更大的项目的一部分，全部用 TypeScript 编写，所以如果它没有类型，它就不起作用。

onigoetz picture onigoetz 于 2017-08-15

因此，我进行了一些调查并创建了一个存储库，该存储库以最少的配置重现我的案例： https :

我还包含了一个 webpack 配置来比较 webpack 是如何工作的。

我对这个问题的理解是，当 rollup-plugin-typescript2 需要文件的编译版本（比如 index.ts）时，Typescript 将返回编译后的文件及其导入，但导入中没有接口。

这就是 rollup 从不生成它们的原因：它不知道它们的存在。

要运行存储库，请在目录中执行npm install && npm run build 。

onigoetz picture onigoetz 于 2017-08-15

如果添加：
import "./SomeInterface"; （完全一样， - 没有任何命名绑定）到您的index.ts文件，它应该可以工作。 可以？

不幸的是，Rollup 不会为仅包含声明的文件（例如仅包含类型声明的文件）调用插件的转换处理程序。 上面的事情应该可以工作，因为这会强制 Rollup 评估文件。 这个问题： https :

如果不改变汇总本身，恐怕我们对此无能为力。 不过，我描述的“黑客”现在应该可以使用。

wessberg picture wessberg 于 2017-08-15

是的，刚刚检查过，在测试仓库中添加import "./SomeInterface";解决问题。

仅导入类型时，typescript 会从 js 输出中省略导入语句，并且汇总不会看到这些文件，因此不会将它们发送以进行转译。

我将尝试欺骗并监视从磁盘请求的哪些文件打字稿与发送哪些文件汇总进行转译。 应该可以强制转换与仅定义标志的差异。 在某些情况下，这可能会导致过多的 d.ts 文件我虽然（例如，对于汇总已经从树中合法地摇晃的事情）

ezolenko picture ezolenko 于 2017-08-15

感谢您的调查，我也会检查我是否可以为此做出贡献。

onigoetz picture onigoetz 于 2017-08-15

@onigoetz ，好的，请与大师一起尝试您的项目。 检查是否生成了正确的声明，还要检查是否没有意外的声明:)

ezolenko picture ezolenko 于 2017-08-16

太棒了，你在我睡觉的时候修好了它:)

我测试了它，它几乎可以正常工作。

只是有一个小问题，但我认为这是我们无法解决的问题，webpack 加载程序完全相同，并且文件列表是由 TypeScript 本身生成的。

举个例子; 如果我的仓库中有三个文件：

  • index.ts导入SomeInterface.ts
  • SomeInterface.ts
  • nongenerated.ts导入SomeInterface.ts

nongenerated.ts永远不会被引用，但无论如何都会生成它的类型。

onigoetz picture onigoetz 于 2017-08-16

酷，感谢测试。 在确认另一个问题后，我会稍后发布它。

是的，绕过汇总时我们无能为力。 您应该能够在exclude选项中手动排除这些文件，但这是一个糟糕的解决方法。

ezolenko picture ezolenko 于 2017-08-17

好的，现在在 0.5.1

ezolenko picture ezolenko 于 2017-08-23

运行良好，只需配置 tsconfig.json

{
    "compilerOptions": {
        "module": "es2015",
        "target": "es5",
        "declaration":true,
        "declarationDir": "lib",
        "typeRoots": [
            "node_modules/@six006",
            "node_modules/@types"
        ],
        "lib": [
            "es2015",
            "es2017",
            "es5"
        ],
    },
    "include": [
        "src/index.ts",
        "src/module/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

include部分告诉您要生成什么

six006 picture six006 于 2018-08-20

YMMV但我让它像这样工作......

前

export type MyType = { ... };

后

type MyType = { ... };

export { MyType }
JoshMcCullough picture JoshMcCullough 于 2019-01-25

对于它的价值，我只是在汇总后调用tsc --emitDeclarationOnly ，它将声明文件覆盖到构建文件夹中。
在我的 package.json 中

"scripts": {
    "build": "rollup -c",
    "postbuild: "tsc --emitDeclarationOnly"
}
yiochen picture yiochen 于 2019-01-31
👍5 ❤3 🎉3
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

HelloDennis picture HelloDennis  ·  3评论
birtles picture birtles  ·  4评论
brandon-leapyear picture brandon-leapyear  ·  7评论
kyle-johnson picture kyle-johnson  ·  10评论
gluons picture gluons  ·  11评论