Rollup-plugin-typescript2: ファイルのインポートを表示

tsconfigとrollupconfigを投稿できますか？

または複製付きの小さなリポジトリ:)

残念ながら、「小さな」レポはありません。 私はここで働いwebpackからrollupに移行しようとしています。

で輸入rollup.config.jsに変更することができますrollup-plugin-typescript2の違いを見るために。

こんにちは。

まず第一に、このプラグインに取り組んでくれてありがとう。 それは確かにrollup-plugin-typescriptよりもはるかに理にかなっています。

この問題が存在することを確認し、小さなデモリポジトリをセットアップできます。
https://github.com/danimoh/rollup-plugin-typescript2-vue-demo

import AnotherComponent from './AnotherComponent.vue';の行をコメントアウトすると、コンパイルされますが、残念ながら、この行が有効になっていない場合があります。

同じ頃にこの問題が発生したのはおかしいです。 たぶんそれは最近の変更によって引き起こされましたか？
ロールアップ、ロールアッププラグイン、タイプスクリプトに関する知識が非常に限られている私の側からの推測は次のとおりです。
typescript自体がロールアップの代わりにAnotherComponentをインポートしようとしている、またはrollup-plugin-vueそのインポートを最初に処理しようとしている可能性はありますか？

これは、 rollup-plugin-typescriptがtranspileModuleファイルごとにコンパイルされるため、この問題が発生しない理由を説明します。

この場合、次のことが興味深いかもしれません： https ：

この問題に関する作業は大歓迎です。

両方のリポジトリで再現されています。同じ問題であるかどうかはまだわかりませんが、可能性があります。

2番目のケースを修正するには、vueプラグインがそれを実行できるように、モジュールの解決をロールアップに送り返す必要があります。

ロールアップのモジュール解像度とtypescriptを接続する際の問題は、それ以降のバージョンでのロールアップがcontext.resolveId(...)からPromiseを返すことです。 したがって、コールチェーンは次のようになります。

• ロールアップはプラグインの変換を呼び出します
• プラグインはtypescriptのLanguageService.getEmitOutput呼び出します
• 言語サービスは、プラグインのLanguageHost.resolveModuleNamesの実装を呼び出し、解決されたパスがその関数で返されることを期待します
• ホストはロールアップのPluginContext.resolveId呼び出します
• ロールアップは約束を返します
• 私が正しく理解していれば、約束でできることは別の約束をすることだけです

LanguageServiceは厳密に同期しているようです： https ：

Plugin.transform自体がPromiseを返すことができますが、オブザーバーオブジェクトのコールバックの奥深くで行われた複数のPromiseをチェーンするメカニズムは、現時点では私を避けています。

やや関連： https ：

こんにちはエゾレンコ。

現在、Javascriptの非同期メソッドは、主にPromisesを返すメソッドを意味します。 新しいasync / await構文は、基本的に非同期メソッドの単なる構文糖衣であり、開発者は同期コードと同様のコードを記述できますが、 asyncメソッドは引き続きpromiseを返します。 ただし、 awaitはasyncメソッドでのみ使用できます。 お気づきのとおり、 LanguageHost.resolveModuleNamesメソッドは非同期ではないため、プレーンなJavascriptでpromiseを待った後でのみ、そのメソッドから戻ることはできません。

ただし、NodeJでは、このようなことは、現在のスレッドで同期メソッドを生成し、非同期メソッドにジャンプして、非同期メソッドが解決されたときに同期メソッドに戻ることで実際に可能です。 synchronize.jsのようなファイバーまたはその周りのラッパーを参照してください。

したがって、asyncメソッドの呼び出しに関することは実際にはそれほど問題ではありません。 ただし、別の問題がある可能性があります。 プラグインコンテキストはメソッドresolveId提供しますが、それだけでは十分ではありません。 vue単一ファイルコンポーネントからtypescriptコードを抽出するには、 rollup-plugin-vueのtransformを呼び出す必要があります。 残念ながら、プラグインコンテキストはその機能を提供していないようです。

これを解決する1つのアプローチは、プロジェクトへの依存関係としてrollup-plugin-vueを追加し、vueプラグインでtransformを直接トリガーすることです。 それは確かにまったく美しくはなく、ロールアッププラグインを操作するための意図された方法でもありません。

別のアプローチは、最初の実行でファイルごとにtransformでtranspileModuleのみを実行して、ロールアップにすべてのインポートを収集させ、vueプラグインにtransform単一にすることです。コンポーネントをファイルし、抽出されたタイプスクリプトコードをキャッシュします。 次に、ロールアップが完了する前に、トランスパイルされたコードを破棄し、 renderChunkまたはgenerateBundleプラグインフックにキャッシュしたコードに対して適切なタイプスクリプトコンパイルを実行します。 これは他のプラグインに干渉する可能性がありますが、それは破棄するコードに追加の変換を適用します。

今のところ、これ以上美しい解決策はまだありません。

編集：考え直してみると、2番目のアプローチはおそらく醜いものではありません。 renderChunkまたはgenerateBundleフックの代わりに、プラグインは最後のインポートがインポートされたときにそれ自体を検出し、その時点でコンパイルを最初から開始し、コンパイルされたファイルをロールアップキューに追加して実際には、他のすべてのプラグインでも処理できます。 以前に生成されたファイルは、最終的なバンドルになってしまうことを避けるために、引き続き破棄する必要があります。
それでも、このアプローチでは、とにかく破棄するファイルに他のプラグインも含まれるため、処理時間が無駄になります。

@danimoh @eddow両方のリポジトリ例の回避策は、問題のあるインポートのすぐ上にある// @ts-ignoreエラーチェックを無効にすることです。

エラーは基本的にtypescriptであり、*。vueのものがどのタイプであるかがわかりません（ Cannot find moduleはモジュールタイプを意味します）。 それが沈黙すると、すべてが正しくコンパイルされているように見えます。 欠点は、vueファイルからインポートされたものはanyタイプであり、エラーチェックに役立たないことです。

（最小リポジトリでは、最初のコンポーネントは2番目のコンポーネントへの参照を必要とします。そうでない場合、ロールアップツリーがバンドルから離れます）

@danimohうん、コンテキストを介してロールアップからモジュールソースを取得する方法はありません。 そのほとんどはvueプラグイン側で実行できます（私はそこでケースを開きました）が、rpt2がそれをインポートするスクリプトを変換する前に抽出されたスクリプトを変換する必要があるなど、潜在的な落とし穴がまだあります。

vue問題スレッドで説明するアプローチでは、vueファイルのインポートを本質的に無視し、ロールアップがファイルをtypescriptにフィードバックするのを待つため、typescriptでファイルを1つずつ処理する必要があると思います。 したがって、ファイル間の型チェックを緩めることになります。

vueプラグインにtsを処理させる代わりに、以下は有効なアプローチであり、以前に提案した醜いハックの一種のより良い反復である可能性があります。

• vueプラグインインスタンスはoptionsフックを介して公開されていますか？
  そうすれば、vueプラグインでtransformメソッドを呼び出すことができます。
• https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-APIから、ts CompilerHostとLanguageServiceHostカスタムfileExistsフィードできるようです。 readFile 、 getScriptSnapshotなど。
• 両方が機能する場合は、typescriptでvueプラグインからASTに取得したコードを解析し、そのASTからインポートを収集して、 .vueファイルの場合はvueプラグインにリクエストすることができます。 すべてのvueファイルについて、抽出されたタイプスクリプトコードをキャッシュし、 readFileなどのメソッドを上書きして、 vueインポート用にキャッシュされたtsコードを返します。

編集：実際、 fileExistsとreadFileを上書きできる場合は、タイプスクリプトがインポートするすべてのインポートに対してこれらのメソッドを呼び出すだけなので、ASTをトラバースして自分でインポートを収集する必要はありません。いずれかの方法。 次に、vueプラグインをオンデマンドで呼び出す必要があります。

Vueプラグインインスタンスが公開されている可能性があります。ロールアップがプラグインが相互に呼び出すことを期待しているかどうか、その場合に何かが（すぐにまたは将来）壊れるかどうかはわかりません。

2番目のポイントは機能します。それが、まさにLanguageServiceHost目的です。

このアプローチは機能する可能性があります。主な欠点は、vueプラグインとの結合が壊れやすいことと、使い捨て作業のための余分なサイクルです。

ロールアップに、プラグインが変換を中止し、現在のファイルが再試行される前に変換される依存関係を宣言する方法があればいいのですが、これはきれいに実装できます...

使い捨ての仕事は実際にはないと思います。 Typescriptはコードを1回だけコンパイルし、抽出されたtsコードをキャッシュする場合、vueプラグインはすべてのファイルを1回だけ処理する必要があります。 このアプローチは、それ自体の結果や、以前の提案以外の他のプラグインの結果を破棄しません。

ええ、ロールアップではアーキテクチャの変更が必要になります。 たぶん、このようなものを実装するためにそこで問題を開くことができるかもしれませんが、それはおそらく時間がかかるでしょう。
また、それが物事を本当に良くするかどうかもわかりません。 すべてのファイルで型チェックを行うには、typescriptがすべてを一度にコンパイルすることを確認する必要があります。 そうしないと、これに遭遇する可能性もあります。

この設定では、単一のvueコンポーネントをコンパイルすることができます。

import VuePlugin from 'rollup-plugin-vue'
import typescript from 'rollup-plugin-typescript2'

export default {
  plugins: [
    typescript({
      typescript: require('typescript'),
      objectHashIgnoreUnknownHack: true,
    }),
    VuePlugin(/* VuePluginOptions */),
  ],
  input: 'src/components/HelloWorld.vue',
  output: [
    { file: 'dist/HelloWorld.cjs.js', format: 'cjs' },
    { file: 'dist/HelloWorld.esm.js', format: 'esm' },
  ],
}

これが、lang = "ts"を使用してVueSFCからモジュールを作成するための最良の方法であるかどうかはわかりません。

何かアドバイスがあれば教えてください。

この設定では、単一のvueコンポーネントをコンパイルすることができます。

そうですが、それは実際のユースケースではありません。 それはHelloWorldです。 問題を理解するのに苦労している人のために、これが私が集めたものです。

ロールアップは文字通りこれを行うことはできません

どうして？ ここに例があります：

<script lang="ts">
import Bar from './Bar.vue';
...
</script>

1）vueプラグインはスクリプトをtypescriptプラグインに渡します
2）typescriptプラグインは.vueファイルを検出しますが、ロールアップはプラグインがwebpackなどのインポートで他のプラグインに延期するメカニズムを提供しないため、それをどう処理するかを知る方法がありません。 通常のJSはプラグインに従うことができますが、プラグインによってすでに処理されているコードはできません。
3）これがlang=scssまたはlang=tsと異なる理由は実際にはわかりませんが、おそらくそうです。

さて、私は何ができますか？

あまりない。

しかし、vuetify！ buefy！

Vuetifyはタイプスクリプトですが、SFCを使用しません。 それは純粋なレンダリング関数です。

BuefyはSFCとロールアップを使用しますが、タイプスクリプトは使用しません。

でも、本当に私にできることは何もありませんか？

あなたはそれを気に入らないでしょう。 typescriptファイルからインポートする必要のあるすべてのVueファイルについて、通常のjavascriptファイルの仲介を作成する必要があります。

import Bar from './Bar.vue';

export default Bar;

そうして初めて、ロールアップを使用してtypescriptSFCコンポーネントライブラリを構築できるようになります。

ねえ、それは吸う

あなたがより良い解決策を思いついたなら、私はそれを聞いてみたいです。