gruntjs - NPM の依存関係に対して機能する grunt-wiredep のようなインジェクターはありますか?

Question

最近のほとんどのパッケージは、NPM と Bower の両方で利用できます。NPM を使用する必要がありますが、プロジェクトのループから Bower を切り離したいと考えています。

私は現在、にインクルードgrunt-wiredepを作成することに依存しています。このツールはすべての Bower 構成を調べて、必要なすべての js および css ファイルを my for me に取り込みます。<script>index.htmlindex.html

NPM の依存関係に対して同じことを行うツールはありますか?

score 18 · Accepted Answer

BrowserifyやWebpackなどのモジュールバンドラーを使用してそれを行うことができます。

Browserify を使い始めるには、まず NPM 経由でグローバルにインストールする必要があります

npm install -g browserify

次に、プロジェクトで、たとえばangularライブラリのように、含めたいフロントエンドライブラリを取得します

npm install --save angular

ここrequire()で、プロジェクトが機能するために取得する必要がある依存関係を Browserify に認識させるためにを使用する必要があります (メインモジュールを定義する Angular アプリの場合、この最初の行を追加します)。

var angular = require('angular');

angular
  .module('autocompleteDemo', [])
  .controller('DemoCtrl', DemoCtrl);

grunt-browserify タスクを設定するには、まずプロジェクトにインストールします

npm install grunt-browserify --save-dev

そして、次のようにタスクを構成します

browserify: {
    main: {
        src: 'entry.js',
        dest: 'bundle.js'
    }
 }

最後に、 index.html に bundle.js スクリプトのマークアップを追加する必要があります。

<script src="bundle.js"></script>

1 に答える 1