問題タブ [webpack]

さて、これは奇妙なものです。ページの下部に Google タグ マネージャー スクリプトを追加し、コンテナーを公開しましたが、すべてのタグを削除しました (タグの 1 つが原因であった場合に備えて)。私のコード スニペットは次のようになります。

タグ アシスタント コードの何かがハングして、ページが数秒間応答しなくなったようです。

このスクリーンショットを見るonreadystatechangeと、ほぼ 3200 ミリ秒かかっていることがわかります。

もう少し詳しく説明すると、node/react/webpack を使用してサーバー側のレンダリングを行っています。サーバーでレンダリングしているページ テンプレートは次のとおりです。

これは Google タグ マネージャーを使用する初めての試みなので、構成に問題があるかどうかはわかりません。助けに感謝します。

アップデート

という一般的な webpack バンドルがありcommon.jsます。[ネットワーク] タブによると、Google タグ マネージャー スクリプトによって 2 回目のダウンロードが強制されているようです。本当に奇妙です。

私はwebpackが初めてで、reactjsで使用したいのですが、今は混乱しています。webpackを使ったクライアントサイトの開発工程でcssがどのように扱われているか知りたいです。webpack がすべての js をバンドルし、bundle.js としてリンクしていることを知っています。これ<script src="http://localhost:3000/assets/bundle.js"></script>は、webpack-dev-server の構成に基づいて、html ファイルで参照します。今、私はcssファイルも持っています。これはどこに行くのですか？私のhtmlファイルでこれを参照するための私のURLは何でしょうか。style-loader と css-loader と ExtractTextPlugin があることは理解していますが、出力はどこに属しますか? できることがわかりましたvar css = require('path/customStyle.css')しかし、それが表示される場所が見えないようですか？これは index.jsx ファイルで行います。だから彼の質問：これをまとめる方法、私のcustomStyle.cssを参照できること。私は何を間違っていますか、または私は何を見逃していますか これが私のプロジェクトフォルダ構造です:

私のwebpack.config.jsは次のようになります

HTML ファイルは次のようになります。

webpack の方法がどのように機能するか、および私のスタイルをどのように取り込むかについての背景についての助けは素晴らしいでしょう.

私のチームと私は現在、かなり大規模なプロジェクトを AMD + RequireJS から CommonJS + Webpack に移行中です。私たちは Webpack が提供するツールを気に入っており、CommonJS はコミュニティが向かっている方向であると考えています。

webpack を利用して .mustache テンプレート ファイルを自動的に読み込んでバンドルする効果的な方法は何ですか? 現在、xportを使用して、プロジェクト フォルダー内のすべての .mustache ファイルを次の形式の単一の js ファイルにバンドルする監視スクリプトがあります。

これを完全に使い続けることができます... 現在のソリューションの特に便利な点は、新しいテンプレートを作成するときに、プロジェクト内のテンプレートを特に参照する必要がないことです。スクリプトはフォルダーを監視しているだけなので、辞書が更新され、別のライブラリを使用して文字列を取得し、使用可能なテンプレート関数にすることができます。

じゃあゴールは？ 私たちのフォルダー内のテンプレートから移動する方法があるかどうか興味があります->プロジェクトにファイルを特に要求することなくコードで使用できる関数。そして、私たちの現在のソリューションは webpack の外に出ています (もちろんフックする方法がない限り)。これは、2 つのウォッチ スクリプトが必要ないため面倒です。ローダーを調べましたが、これらは 1 対 1 のソース ファイル -> 出力ファイルと多対 1 のように見えます。これが現在のソリューションの優れた点です。

ありがとう！

sass ファイルで font-family 変数を指定しようとしていますが、残念です。サスの定義は次のとおりです。

奇妙なのは、引用符を削除するLatoと、Helvetica Neue問題なくコンパイルされることです。そうしないと、次のエラー メッセージが表示されます。

アップデート

さらに奇妙なのは、エラーが生成されても、実際にはファイルがコンパイルされ、css がそこにあるということです。

私はreactJS-webpack-gruntアプリを持っています。

それぞれ独自の設定を使用して、さまざまな環境にアプリをアップロードしたいと考えています。現在、私は1つのsettings.jsファイルを持っています.webpackがそのことを行うとき(gruntビルドまたはサーブ)、設定は 内に隠されassets/main.jsます.

var settings = require('settings');現在、私が行った設定を使用するすべてのファイルで:webpack.config.jsエイリアスを宣言しました

私の意図はsettings、JSON のような構造を持つ別のファイルを用意して、技術者以外の人が簡単に変更できるようにすることです。また、同じコードをコンパイルするたびにアプリを数回アップロードしても、そのままにしておくことができsettings.jsます。

これを行うとうまくいきます：

ただし、これを別のファイルに移動し、CommonJS/webpack を使用してエクスポートすると、次のようになります。

（そのようです：）

...

それはおそらく非常に明白ですが、私の心の中では、なぜそれがうまくいかないのかわかりません:/

私の2つの問題が関連しているかどうかはわかりませんが、可能性があると考えたので、ここに行きます.

私は（webpack / commonjsを使用して）Reactをいじっていますが、基本的なレベルの成功を収めています。コンポーネントがページに正常にレンダリングされます。

残念ながら、イベントは機能しておらず (単純なクリック ハンドラーのテストでも)、私の React 開発ツールは私の階層をまったくロードせず、<Top Level></Top Level>. 公開ローダー (開発ツールの問題を処理するため) を試しましたが、役に立ちませんでした。

どんなアイデアでも大歓迎です！

編集:イベントハンドラーが読み込まれていることを知っていることはおそらく言及する価値があります(たとえば、コンソールにログを記録する関数への参照をハンドラーとして渡すと、メッセージが表示されます)。イベント自体は単に発生していないか、ハンドラーに向けられていません。

編集2：また、（この問題に対して一般的に提案されている解決策に基づいて）開発ツールのウィンドウにReactを公開しようとしたこと、およびReactホームページのような場所に行くと、反応開発ツールが正常に機能することも注目に値します.

PapaParse を使用して、ファイル入力から csv ファイルをロードしています。

現在、スクリプトタグを使用して PapaParse をロードする作業バージョンがあります。

そして、変更イベントを処理します:

私は今、webpack を使用して js をバンドルしたいと考えており、グローバル名前空間に毎回ではなく、必要なときに動的に PapaParse をロードしたいと考えています。このようなもの：

残念ながら、これによりPapaParse ライブラリの次の行Uncaught ReferenceError: Papa is not definedからエラーが発生します。

これを機能させる方法はありますか？

[編集]

私はrequirejs / webpackにまったく慣れていないので、これがこれを修正する正しい方法であるかどうかはわかりませんが、次のシム構成を使用して、これを機能させることができました（残念ながら、ウィンドウの名前空間をまだ汚染しています） ：

私が理解しているように、最初のディレクティブ ( imports?this=>window) は imports loader を使用して、globalパラメーターを (空のオブジェクトではなく) ウィンドウ オブジェクトに設定します。これにより、PapaParse の呼び出しが機能しますglobal.document(global.postMessage()また、修飾されていない呼び出しもPapa機能するようです。つまり、接頭辞が付いていないものglobal.Papa)。2 番目のディレクティブ ( exports?global.Papa) は、require 呼び出しから返されたオブジェクトとして Papa オブジェクトがエクスポートされることを意味します。

これがこれに対処する正しい方法であるかどうか、webpackの経験がある人がアドバイスできるかどうか興味がありますか?