問題タブ [ts-loader]

サービスワーカーを作成したい。

免責事項：私はserviceworker-webpack-pluginを使用したくありません。必要のない多くのオーバーヘッドが追加されます。webpack がトランスパイルされた js/ts ファイルを静的ファイルとして提供できることは 100% 確信しています。

だから私は持っていmain.tsますsw.ts：

• main.tsdev-server がデフォルトで行うように、実行時にautoreloadts-loaderをサポートする必要があります。index.htmlwebpack-dev-server main.ts
• sw.ts一方ts-loader、 も同様にトランスパイルする必要があり、に注入すべきではありませんindex.html。また、実行するwebpack-dev-serverと、dev-server はそこに hotreload js コードを追加するべきではありません。私はただトランスプライドされたいだけですsw.js。
• sw.jsまた、実行時に から参照したいと思いますmain.js。ファイルローダーは、 の場合と同じ方法で提供する必要があります.css files。

試み #1

私の最初の試みは、以下のようにwebpack構成に2つのエントリを作成することでした:

sw.ts注入を防ぐために、 ifindex.ejsの js ファイル名を使用して手動でチェックすることができます。このシナリオは機能しますが、dev-server 上にある間、webpack-dev-server は hotreload コードを追加し、実行時に 内で失敗します。サービス ワーカーにはウィンドウ オブジェクトがないため、これは論理的です。sw.jswindow not defined

試行 #2、github へのリンク

しかし、次に試してみましfile-loaderた。これは次のようになります。

webpack.config.js :

const HtmlWebpackPlugin = require("html-webpack-plugin");

tsconfig.json :

main.ts ;

sw.ts :

出力sw.js :

なぜ webpack はモジュールの依存関係を解決しないのですか? Service Worker を処理する別の方法はありますか?

私のプロジェクトでは、合理的な方法でts-loaderを利用してantdをロードする必要があります。次のエラーが表示されます。

問題のコードは次のとおりです。

ts-loader でプラグインを正しくロードするにはどうすればよいですか? 編集ライブラリを動的にロードできるようにするには、次のように ts-loader プラグイン オプションを含める必要があります。

transpileOnly: 真、

詳細はこちら。

プロジェクトでts-loaderとfork-fs-checker-webpack-pluginを使用していますが、次のように不平を言っていnode_modules/@typesます。

またit、describe、expect、 などについては、次のようなエラーがあります。

のディレクトリを除外しようとしましたtsconfig.json:

そして（の一部）私のwebpack.config：

バージョン:

Typescript プロジェクト (ライブラリ) の型宣言をコードのトランスパイルとバンドルと共に発行する最も効率的な方法は何ですか?

私はwebpack、ts-loader、fork-ts-checker-webpack-plugin を使用しています。

1 つのビルド サイクル (ビルド コマンド) で取得しようとしている:

1. ライブラリの開発バージョン (非縮小、インライン ソース マップなど)
2. ライブラリの prod バージョン (縮小 + 別のソース マップ ファイル)
3. 型宣言

最初の 2 つのオプションは、fork-ts-checker-webpack-plugin でうまく機能します。スレッド・ローダーとキャッシュ・ローダーをミックスに投入すると、状況はさらに良くなります。ただし、それらが機能する方法では、.d.ts ファイルを発行することはできません。

だから私は、そのようなファイルを発行するための最良の方法は何かを理解しようとしています.

今私が見るオプション：

1. tscコードのバンドルの最後に使用します。spawnSyncたとえば、で実行します。
2. emitDeclarationOnlyモードで webpack を排他的に実行する別の webpack 構成オブジェクトを作成します。
3. で ts-loader を実行します{transpileOnly: false, happyPackMode: false}が、それはスレッドを使用するという目標を無効にします

一般的に何が速いでしょうか？別のアプローチはありますか？

当分の間、うまくいくように思われる私自身の答え：

webpack.config.jsで、webpack 構成をエクスポートする部分の上に、次を追加します (必要に応じて引数を微調整します)。

このコードは子プロセスを生成し、webpack が実行しようとしている処理と並行して実行されます。そのため、webpack は Typescript の型についてまったく心配する必要がなくなりました。