問題タブ [webpack]

私はこれまでこの構文を見たことがなく、それが何であるか疑問に思っています。

左側の括弧は構文エラーをスローしています:

予期しないトークン {

webpack構成のどの部分が変換されているのか、または構文の目的が何なのかわかりません。ハーモニーの事ですか？誰かが私を啓発できますか？

私はしばらくの間、Webpackが原因であると思われる問題に苦しんでいます。

基本的に、クライアントに提供するためにWebpackにバンドルしているノードベースのアプリがあります（これはReactJSベースのアプリです）。この問題は、Tabletop NPM パッケージをインストールしてrequired したときに発生しました。

ブラウザーで作成された Webpack を読み込もうとするとbundle.js、構文エラーが発生します。

Uncaught SyntaxError: Unexpected identifier

のこの行について不平を言っていますbundle.js：

target[capName] = __webpack_require__(387)(""path + '/' + name);

掘り下げた後、この行はHoekライブラリ (Tabletop のサブ依存関係) の行に由来することがわかりました。

target[capName] = require(path + '/' + name);

明らかに、Webpack はここで奇妙なことを行っています。

原因の切り分けには至りませんでしたが。Tabletop には NodeJS の使用例が含まれており、これを Webpack して問題なく実行できました。

また、上記のような不正な変換を確認することなく、Hoek のクローンを作成して Webpacke しました。

これが Webpack、Hoek、または Tabletop の問題であるかどうかはわかりません。そのため、ここに投稿しています。

ここでもGHでも、関連する問題は見つかりません。

すべての助けに感謝します！

私の目標は、既存の JavaScript アプリケーションでノード モジュールを使用する方法を理解することです。

私の既存のアプリケーションは jQuery と ReactJS ベースです。

プロジェクトで使用を開始したいいくつかのノード モジュールに遭遇しました。これらはモジュールとしてのみ使用できるようです (そのため、scriptタグを追加するだけでは使用できません)。

以前は、ライブラリをインストールして、タグbowerを使用してローカルで使用していました。script

Browserify多数の Node モジュールを単一の JavaScript ファイルに使用またはWebpackバンドルできることは理解していますが、その中にあるモジュールを既存のアプリに公開するにはどうすればよいですか?

できるようになりたいのは

wheremyapp.jsはグローバル変数を使用して、module_xどちらが npm モジュールであったかを指定できます。

私が予見する問題の 1 つは、bundle.jsjquery が既に含まれている可能性があるということです。「プロジェクト全体をモジュールに変換する」と言う人もいるかもしれませんが、それはうまくいくでしょう! しかし、すべての利点にもかかわらず、それを行わずに実行できるかどうか疑問に思っています;-)

Heroku にデプロイした後に Webpack ビルドをトリガーする最良の方法は何ですか?

最も美しいソリューションではない、既にバンドルされているバージョンをプッシュします。

JavaScript の依存関係を管理するために Webpack を使用して Web アプリに取り組んでいるときに、これから説明する問題に遭遇しました。

文字列を渡す依存関係のロードrequire()は美しく機能します:

は Bower と共にインストールされ、 Webpackjqueryは Bower モジュールを自動的に解決するように正しく構成されています。

現在、モジュールを条件付きでロードする問題に取り組んでいます。特に、モジュールを CDN からダウンロードする必要がある場合、または CDN が失敗した場合はローカル サーバーからダウンロードする必要がある場合に注意しています。ちなみに、私scriptjsはCDNから非同期にロードしていました。私が書いているコードは次のようなものです：

このコードも美しく機能します。

ここで、最初に CDN からロードしようとする多くの依存関係 (ハンドルバー、Ember など) があることは明らかであるため、このコードは少し冗長になり始めます。そのため、私がしようとする最も論理的なことは関数にリファクタリングします。

問題は、ステートメント内の式を処理するときにWebpack に特定の 動作requireがあることです。これにより、上記の方法でモジュールをロードしようとする試みが妨げられます。特に、その中で式を使用するrequire場合

式で可能なすべてのファイルを含めようとします

上記のコードで Webpack を実行しようとすると、正味の効果として大量のエラー メッセージが表示されます。

リンクされたリソースは、含めるJavaScriptファイルのパスを明示的に宣言することを提案していますが、正確なパスを渡すことができない、または渡したくない場合に同じことを行う方法がわかりませんrequireが、代わりに示されているように、自動的に解決されたモジュール。

皆さんありがとう

編集：

式を使用してこれらのスクリプトをロードする方法はまだわかりませんが、回避策を設計しました。基本的にはrequire('script')、コールバック関数内に を明示的に記述し、必要なときにその関数を動的に呼び出すという考え方です。より正確には、次のような構成ファイルを用意しました。

次に、メイン コード内で、ロードするリソースの配列を次のように定義します。

そして、開発バージョンまたは配布バージョンをロードする必要がある場合は、動的に次のように呼び出します。

これが実際に行われている、より完全な例を次に示します。

自分のプロジェクト (または任意の npm パッケージ) で Immutable を使用したいとしましょう。npm install編集したので、 にありますnode_modules。もちろん、そこには CommonJS エクスポートがあります。ただし、プロジェクトで es6 モジュールを使用したいと考えています。

私は Webpack を使用してすべてをまとめてコンパイルし、6to5-loader を使用して es6 モジュール構文を処理しています。

私のソースファイルではimport Immutable from 'immutable';--- と言いますが、es6はエクスポートさimportれた es6 を探しているため、これは問題を引き起こしdefaultます (不変またはおそらく他のほとんどの npm パッケージの場合)。コンパイルされたコードは次のようになります。 ---見つけるプロパティvar Immutable = require('immutable')["default"];がないため、もちろんエラーになります。default

es6 モジュールで npm パッケージを使用できますか?