web-dev-qa-db-ja.com

フロントエンドの依存関係にnpmを使用するにはどうすればよいですか？

Npmを使用してフロントエンドの依存関係（バックボーン、jQuery）を処理することは可能（そして一般的には良い考え）かどうかを確認したいと思います。

バックボーン、jQueryなどがすべてnpmを通じて利用できることを発見しましたが、別の抽出ポイント（デフォルトはnode_modules）またはシンボリックリンクなどを設定する必要があります...

誰かが以前にこれをしたことがありますか？

出来ますか？

package.jsonで何を変更する必要がありますか？

javascriptnode.jsnpmpackage-managers
39
dev.pus

短い答え：ソート。

これをサポートするかどうかは、モジュール作成者次第ですが、一般的ではありません。 Socket.ioは、そのようなサポートモジュールの例で、ランディングページに示されています。ただし、他の解決策があります。これらは私が実際に知っている2つです。

  • http://ender.no.de/ -Ender JS、クライアントモジュール用の自己記述型NPMアナログ。私の好みには少々複雑すぎます。
  • https://github.com/substack/node-browserify -Browserify。依存関係を調べ、node.jsモジュールパターンをエミュレートすることで単一のスクリプトを出力できるユーティリティです。 jake | cake | rake | makeビルドスクリプトを使用してapplication.jsを吐き出すことができます。私はこれを簡単に使用しましたが、少し不格好であると判断し、デバッグするのが面倒になりました。また、すべてのデュアル環境npmモジュールがbrowserifyを介して実行されるのを好むわけではありません。

個人的には、現在、私はRequireJS（ http://requirejs.org/ ）を使用し、MozillaがBrowserQuestサンプルアプリケーション（ https：/ /github.com/mozilla/BrowserQuest ）。これには、AMDスタイルのモジュールローダーのサポートを削除したバックボーンやアンダースコアなどのモジュールを潜在的にシムする必要があるという課題が伴うことに注意してください。ここでシミングに関係する例を見つけることができます： http://tbranyen.com/post/amdrequirejs-shim-plugin-for-loading-incompatible-javascript

本当にそれがどんなに害を及ぼすように思われるので、ネイティブモジュールのサポートがとてもホットな話題になっています。

16
Steve McGuire

Browserifyを使用するための+1。ここdiy.orgで使用しており、気に入っています。 Browserifyの背後にある最良の導入と推論は、 Browserifyハンドブック にあります。 CommonJSやAMDソリューション、ビルドパイプライン、テストなどのトピックがカバーされています。

Browserifyがうまく機能する主な理由は、NPMと透過的に機能するためです。モジュールが必要である限り、それをブラウザ化できます（すべてのモジュールがブラウザで機能するように作られているわけではありません）。

基本：

npm install jquery-browserify

main.js

var $ = require('jquery-browserify');
$("img[attr$='png']").hide();

次に実行します：

browserify main.js > bundle.js

次に、HTMLドキュメントにbundle.jsを含めると、main.jsのコードが実行されます。

17
Derek Reynolds

私たちのチームは、フロントエンドプロジェクトを構築するための Lineman というツールを維持しています。このツールはノードベースであるため、プロジェクトはアセットを構築するために動作するserver-sideの多くのnpmモジュールに依存していますが、 client-side依存関係をコピーしてvendor/jsにコミットすることを期待するボックス。

しかし、たくさんの人々（私も含めて）がbrowserifyとの統合を試みており、（a）古くなっている、または追加されているサードパーティによって保守されているnpmモジュールに至るまで、多くの複雑さと問題に遭遇しました不要な変更、（b）ロード時に失敗し始める実際のライブラリtraditionally、requireという名前のトップレベルの関数が定義されている場合でも、 AMD/Require.jsの手荷物のため。

私の短期的な推奨事項は、ほこりが落ち着くまで、古い形式のスクリプト連結を保留し続けることです。それを保証するのに十分な大きさまたは複雑な問題が発生するまでは、他の方法よりもデバッグとビルドの修正に多くの時間を費やすことになると思います。そして、私たちのほとんどは、あなたの時間の最善の使い方は、ビルドツールではなく、アプリケーションコードに集中することに同意していると思います。

5
Justin Searls

私は個人的に、小さなプロジェクトに webmake を使用しています。これは、npmの依存関係をブラウザーに取り込む方法でbrowserifyの代替手段であり、明らかに軽量化されています。

Browserifyとwebmakeを詳細に比較する機会はありませんでしたが、webmakeは、socket.io（とにかくIMOでいっぱいのグローバル変数）などのグローバル変数を内部で使用するモジュールではうまく機能しないことに気付きました。

上記で推奨されているRequireJSについては注意が必要です。これはAMDローダーであるため、ブラウザーはJSファイルを非同期でロードします。これは、クライアントとサーバーの間のより多くの交換を誘発し、モバイルネットワークから/悪いWiFiでブラウジングしている人々のUXを低下させる可能性があります。さらに、JSコードをシンプルかつ小さく保つことに成功した場合、非同期ロードは絶対に必要ありません。

1
vcarel

ブラウザーパッケージマネージャーである http://jspm.io/ をご覧ください。 Nice ES6もサポートしています。

1
Brian Di Palma