web-dev-qa-db-ja.com

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

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

私は現在、grunt-wiredepに<script>インクルードを作成するためにindex.htmlに依存しています。このツールは、すべてのBower構成を調べて、必要なすべてのjsファイルとcssファイルを私のindex.htmlにプルします。

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

gruntjsnpmbowerwiredepgrunt-wiredep
25
Noah Solomon

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

Browserifyの使用を開始するには、最初にNPMを介してグローバルにインストールする必要があります

_npm install -g browserify
_

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

_npm install --save angular
_

次に、require()を使用して、プロジェクトが機能するためにフェッチする必要のある依存関係をBrowserifyに認識させる必要があります（Angular appの場合、メインモジュール、この最初の行を追加します）

_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>
_

サンプルコードは https://github.com/pra85/grunt-browserify-example にあります。

17
Prayag Verma