こんにちは、
ライブラリのwebpackからrollupに移行しようとしていますが、宣言を正しく機能させるのに問題があります。
インターフェイス宣言がエクスポートされていないようです。これは、次のような場合に問題になります。
import { RenderedCell } from "../RenderedCell";
export default class MergedCell implements RenderedCell {
// ...
}
RenderedCellが見つからないというエラーが表示されます。
私はwebpackで作業しましたが、これを壊した構成の違いが何であるか理解できません。 しかし、私はそれがロールアップでは正常であることを理解しているようです。
ところで。 最新のロールアップ、rollup-plugin-typescript2およびrollup-plugin-uglifyを使用しています。必要に応じて構成を投稿できます。
これはランタイムエラーですか、それともタイプスクリプトエラーですか? 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"
}
最も参考になるコメント
価値があるのは、ロールアップ後に
tsc --emitDeclarationOnly
呼び出すだけです。これにより、宣言ファイルがビルドフォルダーに上書きされます。私のpackage.jsonで