問題タブ [ts-loader]

Grunt、Typescript、Webpack、およびローダーは初めてです。これらのツールのドキュメントを理解しようとしています。便利なことに、ts-loader はこのチュートリアルhttp://www.jbrantly.com/typescript-and-webpack/を参照しています。これは役に立ちましたが、私が必要としているものではありません。

私たちのプロジェクトはTypescriptとJavasCriptおよびJSXを使用しておりgrunt ts、ソースマップを含むtypescriptをjavascriptにコンパイルするタスクを使用しています。JavaScript は最終的にまとめてコンパイルされてから圧縮され、最終的に min-file と対応する sourcemap ファイルが生成されます。残念ながら、ソースマップには typescript javascript が最終製品に含まれているようには見えません。これは、typescript で作成された javascript ソース ファイルを本番環境から見ることができないためです。通常の JavaScript ファイルのみ。

grunt ファイル内の既存の webpack タスクを変更して、ts コンパイラの代わりに ts-loader を使用してコンパイルし、縮小してマップを提供できるようにすることができると考えました。ts-loader が必要なマップをコンパイルして生成することを期待しています。

既存の単調なタスクは

そして、私は今それをこれに変えました：

ビルドコールgrunt webpack:devまたはgrunt webpack:prod環境によって異なります。

これが実行された後、クロージャ コンパイラを使用してすべての JavaScript がまとめて縮小されます。次に、マップ ファイルを指すコメント付きの参照が、1 つの min ファイルの末尾に追加されます。私が解決しようとしている問題は、プロダクション typescript でコンパイルされた Java スクリプトのソース マップがないことです。ソース マップは、typescript から作成された javascript 以外のすべてのものにあります。

私は

1. コマンド ラインで実行grunt webpack:prodし、適切な場所で min ファイルと map ファイルを探します (それらはそこにあります。おそらく ts 以外の JavaScript が含まれています)。

2. prod モードで war をデプロイし、source-map 設定をオンにして、ブラウザー開発ツールから予期される JavaScript ファイルを探します。

ブラウザでまだソースファイルが見つかりません。

この単調なタスクは正しいですか? それとも他に問題があるのでしょうか...

私は grunt タスクから webpack と ts-loader を使用して Typescript をトランスパイルし、プロダクションのデバッグに使用するソースマップを生成しています。私のチームは、JavaScript ソースだけでなく、元の Typescript ソースも表示できるようにしたいと考えています。ドキュメントの多くのページと多くの質問/回答を調べて、適切な解決策を探しましたが、これまでのところ、ブラウザーに Typescript ファイルが表示されず、JavaScript バージョンのみが表示されます。

私たちのプロジェクト ルート モジュール、または webpack タスクの「エントリ」でwebpackEntryある は、JavaScript ファイルを必要とする JavaScript ファイルであり、その一部は TypeScript からコンパイルされたものですが、手動で作成されたものもあります。

このように構成されたwebpack「prod」タスクがあります：

そして tsconfig.json:

...しかし、Chrome Dev Tools ソースに表示されるのは JavaScript ソース ファイルだけです。元の JavaScript ソース ファイルと元の Typescript ファイルを表示できるようにしたいのですが、トランスパイルされた JavaScript ファイルは表示したくありません。

更新: 以下の @basarat の提案に従い、source-map-loader ツールを追加しました。dev-tools ウィンドウにはまだ JavaScript ファイルしか表示されません。

関連する抜粋:

これを支援できる ts-loader の専門家はいますか? よろしくお願いします。

次の開発セットアップがあります。

• Angular2 (Typescript あり)
• パッケージング用の Webpack
• Jasmine テストのテスト ランナーとしての Karma
• Karma を呼び出すための Gulp

Karma は次のように構成されます。

Webpack は次のように構成されます。

ts は次のように構成されます。

(/node_modules は /src と同じレベルにあり、tsconfig.json は /src フォルダーにあります)。

そのため、lodash、fastclick などのさまざまな *.d.ts ファイルを含む /src/typings フォルダーがあります。Karma を呼び出すと、定義ごとに次のメッセージが表示されます。

Jasmine テストは正常に実行されます (テスト以外のビルドは正常に実行されます) が、これらのメッセージの原因と回避方法を教えてください。

Typescript ライブラリ用の単純な webpack プロジェクトを作成しました: https://github.com/lbar/test-webpackts-issue

Linux では、npm run build正常に終了します。

Windows では、npm run build「発行」段階でブロックされます。出力は次のとおりです。

ノードのバージョンが異なります。Windows では 6.2.2、Linux では 4.4.5 です。それが原因かも知れない。誰かが問題について考えていますか? webpack、ts-loader、または typescript の問題ですか?

もう 1 つ、 call totscは両方のシステムで機能しています。

ご協力いただきありがとうございます

typescript の import ステートメントと webpack のサポートに少し問題があります。たとえば、内部に import ステートメントしかないモジュール A と、モジュール A をインポートするモジュール B がある場合、webpack ウォッチを実行した後、私の bundle.js 出力ファイルは、javaScript コードが生成されるセクションで空になります。webpack がインポートを解決しないことを示唆しています。次に例を示します。

そして、これが私のwebpack構成です

それを修正する方法はありますか？

resolve.root私たちのプロジェクトは、絶対パスでモジュールをインポートするために webpack オプションを使用しています。（のようなものを避ける../../../module）
現在の状態では、プロジェクトは完全に正常に動作するbabel-loaderを使用しています。
私の仕事はアプリを Angular 2 に移行することです。
そのため、現在 TypeScript に移行中です。
どういうわけか、ts-loaderresolve.rootはwebpack 構成のオプションと組み合わせて動作しないようです。

webpack.config.jsの例

モジュールのインポートの例
import AbstractListState from 'states/abstract_list_state';

ディレクトリはstatesディレクトリ内にありapp/libます。

実行時のエラーwebpack

gulp 内で webpack の ts-loader を使用して Typescript プロジェクトをビルドしようとしています。次のエラーが発生します。

stream.js:74 throw er; // パイプで未処理のストリーム エラー。^ エラー: ./app/react/helloDirective.tsx モジュールの解析に失敗しました: C:...\app\react\helloDirective.tsx 予期しないトークン (1:13) このファイル タイプを処理するには、適切なローダーが必要な場合があります。SyntaxError: Unexpected token (1:13) at Parser.pp.raise (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:923:13) at Parser.pp.unexpected (C:. ..\node_modules\webpack\node_modules\acorn\dist\acorn.js:1490:8) で Parser.pp.expectContextual (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:1449: 39) Parser.pp.parseImport (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:2254:10) で Parser.pp.parseStatement (C:...\node_modules\webpack\) でnode_modules\acorn\dist\acorn.js:1762:60) で Parser.pp.parseTopLevel (C:... \node_modules\webpack\node_modules\acorn\dist\acorn.js:1666:21) の Parser.parse (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:1632:17) のオブジェクト.parse (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:885:44) で Parser.parse (C:...\node_modules\webpack\lib\Parser.js:902: 15) DependenciesBlock で。(C:...\node_modules\webpack\lib\NormalModule.js:104:16)

tsconfig.json

gulpfile.js

helloDirective.tsx

hello.react.tsx

typescript を使用して開発したアプリの複数のバンドルを作成し、オンデマンドでロードするために、webpack が提供するコード分割機能を使用したいと考えています。私はしばらくオンラインで解決策を探していましたが、見つけた最も近い答えはこれです: https://github.com/TypeStrong/ts-loader/blob/master/test/execution-tests/babel-codeSplitting /require.d.ts

この例は、公式の ts-loader ドキュメントから直接取得したものであり、分割ポイントを作成するために require.ensure に依存する方法を示しています。

私を悩ませているのは、タイプスクリプトでそれを行う簡単な方法がないことです。require.ensure 関数は typescript で直接呼び出す必要があります。次の宣言ファイルを指定して、typescript がその呼び出しを黙って消化できるようにする必要があります。

同じ結果を達成するためのよりエレガントな方法はありますか?

.json ファイルを非同期で読み込もうとしています。.js ファイルの例がありますが、typescript を使用していて、解決策が見つからないようです。

webpack.config.js

app.ts

コンソールにエラーが表示され、

ただ、非同期でやってみないとうまくいきますが、

ありがとう