Rollup-plugin-typescript2: インターフェイス宣言が削除されるのはなぜですか?

作成日 2017年07月19日  ·  19コメント  ·  ソース: ezolenko/rollup-plugin-typescript2

こんにちは、

ライブラリのwebpackからrollupに移行しようとしていますが、宣言を正しく機能させるのに問題があります。

インターフェイス宣言がエクスポートされていないようです。これは、次のような場合に問題になります。

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

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

RenderedCellが見つからないというエラーが表示されます。
私はwebpackで作業しましたが、これを壊した構成の違いが何であるか理解できません。 しかし、私はそれがロールアップでは正常であることを理解しているようです。

ところで。 最新のロールアップ、rollup-plugin-typescript2およびrollup-plugin-uglifyを使用しています。必要に応じて構成を投稿できます。

最も参考になるコメント

価値があるのは、ロールアップ後にtsc --emitDeclarationOnly呼び出すだけです。これにより、宣言ファイルがビルドフォルダーに上書きされます。
私のpackage.jsonで

"scripts": {
    "build": "rollup -c",
    "postbuild: "tsc --emitDeclarationOnly"
}

全てのコメント19件

これはランタイムエラーですか、それともタイプスクリプトエラーですか? RenderedCell自体からインターフェイスをエクスポートする方法を投稿していただけますか?

問題は、ファイルがまったく生成されておらず、別のプロジェクトでライブラリを使用すると失敗することです。

待って、 RenderedCellインターフェースが生成されることを期待していますか? あなたが投稿したコードから、typescriptはRenderedCell.tsという名前のファイルが現在のファイルの1つ上のディレクトリに存在することを期待し、次のようなものを含む必要があります。

export interface RenderedCell 
{ 
    // ...
}

プロジェクトの構造について詳しく教えてください。 (ファイルツリー、tsconfig、rollup configなど)

はい、生成されることを期待しています。

これが私の構成です:

ビルドの実行: rollup -c -f es -n sq-web-component-table -o dist/sq-web-component-table.es.min.js

非常に大きなライブラリであり、信号よりもノイズが多いため、ツリー全体を配置しませんでした。 しかし、distで多くのファイルが生成されていないことがすでにわかります。

rollup.config.ts

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)
    ]
}

tsconfig.json

{
  "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

ああ、なるほど。 libは万が一オープンソースですか?

これらのオプションを使用して構築してみてください。

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

予想されるすべてのファイルが処理されているかどうかを確認してください。 宣言が突然生成され始めた場合は、どこかにキャッシュの問題があります。

RenderedCell.tsが出力( rpt2: transpiling '...' )に記載されていない場合は、詳細度を3に増やし、それをインポートすることになっているファイルがそれを行っているかどうかを確認します。 あなたは次のようなものを見るはずです

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

問題が明らかでない場合は、どこかにログを追加します。

私はしたいです、将来的になるかもしれません:)

トリックをありがとう、私は月曜日にこれを試してみます。

tsconfigのcompilerOptionsセクションでdeclaration: falseを設定して再コンパイルすると、問題は解決しますか? はいの場合、TSCによって報告されたエラーは、distディレクトリ内のファイルの1つに関連していますか? 両方に対する答えが「はい」の場合、単純な関数のエクスポートなど、 RenderedCellファイルを含むファイルに非型ロジックを導入すると、エラーはなくなりますか? はいの場合、その理由は、 RenderedCellを含むファイルが未使用と見なされ、Typescriptがその宣言を準備しないためです。

これがすべて当てはまる場合、2つのオプションがあります。

  • バンドルの宣言の生成を停止します。
  • タイプに関連しない変更をファイルに導入することにより、ロールアップによってファイルが完全にツリーシェイクされないようにしてください。 はい、それはハックであり、私たちはより良い方法を見つけることを願っています

こんにちは、

長い遅延をお詫び申し上げます。ヒントとコツを試しましたが、生成されたインターフェイスの型定義を取得できませんでした。

構成をtypescript({ verbosity: 3, clean: true })に変更しました。
生成されたビルドの出力には、 RenderedCellインターフェイスについての言及は1つもありません。

ライブラリのindex.d.tsが直接ファイルを必要とし、インターフェイスを除くすべてのファイルが生成されるため、このファイルが必要であると100%確信していますが、インターフェイスはまだindex.d.tsインポートに含まれていますファイル。

これらのファイルが生成されない特定の理由があるかどうかを確認するために、コードを詳しく調べます。

@wessbergこれはすべてTypeScriptで記述されたより大きなプロジェクトの一部であるライブラリであるため、バンドルの宣言の生成を停止することはできません。したがって、型指定がない場合は機能しません。

そこで、調査を行い、最小限の構成セットで自分のケースを再現するリポジトリを作成しました: https

また、webpackがどのように機能するかを比較するためにwebpack構成を含めました。

この問題についての私の理解は、rollup-plugin-typescript2がコンパイルされたバージョンのファイル(たとえばindex.ts)を必要とする場合、Typescriptはコンパイルされたファイルとそのインポートを返しますが、インポートにインターフェイスはありません。

そのため、ロールアップによってそれらが生成されることはありません。それらの存在を認識していません。

リポジトリを実行するには、ディレクトリ内でnpm install && npm run buildを実行します。

追加する場合:
import "./SomeInterface"; index.tsファイルへのimport "./SomeInterface"; (まさにそのように、名前付きバインディングなしで)、それは機能するはずです。 しますか?

残念ながら、Rollupは、型宣言のみを含むファイルなど、宣言のみのファイルに対してプラグインの変換ハンドラーを呼び出しません。 Rollupがファイルを評価することを強制するので、上記のものは機能するはずです。 この問題: https

ロールアップ自体を変更せずにこれについて多くを行うことはできないのではないかと思います。 私が説明した「ハック」は今のところうまくいくはずです。

はい、チェックしました。テストリポジトリにimport "./SomeInterface";を追加すると、問題が修正されます。

タイプのみをインポートする場合、typescriptはjs出力からインポートステートメントを削除し、ロールアップはそれらのファイルを認識しないため、トランスパイルのためにそれらを送信しません。

タイプスクリプトがディスクから要求したファイルと、ロールアップがトランスパイルのために送信したファイルをだまして監視しようとします。 定義のみのフラグで違いを強制的にトランスパイルできるはずです。 これにより、場合によってはd.tsファイルが多すぎる可能性があります(たとえば、ロールアップがツリーから合法的に振られている場合など)。

調査していただきありがとうございます。また、これに貢献できるかどうかも確認します。

@onigoetz

素晴らしい、あなたは私が寝ている間にそれを文字通り修正しました:)

私はそれをテストしました、そしてそれはほとんどうまくいきます。

小さな問題がありますが、それは私たちが何もできないことだと思います。webpackローダーはまったく同じことを行い、ファイルリストはTypeScript自体によって生成されます。

例として; リポジトリに3つのファイルがある場合:

  • index.tsインポートSomeInterface.ts
  • SomeInterface.ts
  • nongenerated.tsインポートSomeInterface.ts

nongenerated.tsが参照されることはありませんが、そのタイプはとにかく生成されます。

かっこいい、テストしてくれてありがとう。 別の問題が確認されたら、少し後でリリースします。

ええ、ロールアップをバイパスするときにできることはあまりありません。 excludeオプションでこれらのファイルを手動で除外できるはずですが、これは適切な回避策ではありません。

OK、0.5.1で今

うまく機能します。設定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セクションは何を生成するかを示します

YMMVですが、私はそれをこのように動作させることができました...

export type MyType = { ... };

type MyType = { ... };

export { MyType }

価値があるのは、ロールアップ後にtsc --emitDeclarationOnly呼び出すだけです。これにより、宣言ファイルがビルドフォルダーに上書きされます。
私のpackage.jsonで

"scripts": {
    "build": "rollup -c",
    "postbuild: "tsc --emitDeclarationOnly"
}
このページは役に立ちましたか?
0 / 5 - 0 評価