web-dev-qa-db-ja.com

「キャッチされないReferenceError：requireは定義されていません」とAngular 2 / webpack

ノードとwebpackを使用して、グラフィックデザイン会社のHTMLテンプレートをAngular 2プロジェクトに組み込んでいます。

HTMLは、次のようなさまざまなスクリプトを取り込みます。

<script src="js/jquery.icheck.min.js"></script>
<script src="js/waypoints.min.js"></script>

だから私はcomponent.tsでそれらを必要としています：

var icheckJs = require('../js/jquery.icheck.min');
var waypointsJs = require('../js/waypoints.min');

他にもいくつかのスクリプトと、正しく機能しているように見えるいくつかのSASSがあります。

webpackは喜んですべてを構築し、「npm start」も成功します。ただし、ブラウザに到達すると、この苦情が表示されます。

Uncaught ReferenceError: require is not defined node_modules/angular2/platform/browser.js:1 Uncaught ReferenceError: require is not defined

これは実際に次の行によってurl.jsからスローされます。

var punycode = require('punycode');

これはCommonJsに必要ですか？数週間前にこれをWeb開発で使用したことがなかったので、Commonbacksなど、webbackのさまざまな要求を解決しています。

.jsローダー用のwebpack.config.jsからの抜粋は次のようになります。

{ test: /\.js$/, loader: 'script' }

このエラーを回避するにはどうすればよいですか？

javascriptnode.jsangularwebpack
24
serlingpa

WebPackはこれを単独で行うことができます。スクリプトsrcタグを使用して、最初に最初のチャンクをロードすることを確認する必要があります。通常、エントリの値になります：-bundleが追加されたWebPack構成のキー。明示的なチャンクを行っていない場合、エントリチャンクは初期チャンクとエントリチャンクの両方であり、WebPackランタイムが含まれている必要があります。 WebPackランタイムには、コードを実行する前にrequire関数が含まれ、ロードされます。

コンポーネントまたは必要なものはすべて、スクリプトがそこから開始されるため、エントリファイルから要求される必要があります。基本的に、明示的にチャンク化していない場合、エントリポイントJSファイルは、スクリプトsrcに含めることができる唯一のファイルです。それ以外はすべて必要です。含めるものは通常、JSファイル名にバンドルされます。デフォルトでは、main-bundle.jsである必要があります。

9
Mark H.

答えを探しているが、上記がうまくいかない人には：

短い

webpack.config.jsの現在のtargetをtarget: 'web'に追加または置換します

もう少し長く

Webpackには異なる targets があります。これを試し、ターゲットをnodeに変更した場合、チャンクをロードするために 'require'が使用されます。最良の方法は、target: 'web'にwebpack.config.jsをターゲットにする（または追加する）ことです。これがデフォルトのターゲットであり、ブラウザが処理できる方法でチャンクをロードします。

私は最終的にこの解決策を見つけました ここ 。

0
Maniflames

あなたが持っていると仮定して1行でこれを行うことができます

  • dist/bundle.jsのバンドル

  • ブラウザのページをclient/client.jsでレンダリングするソースファイルクライアントコード

    webpack && webpack ./client/client.js dist/bundle.js \ && webpack-dev-server --progress --color

ライブラリの一部のソースが変更された場合、dist/bundle.jsパッケージで最後の変更が取得されるため、webpackを再度実行する必要があります（もちろん、gruntファイル監視タスクのように追加できます）。 webpack-dev-serverはサーバーを実行します。

0
loretoparisi