Is there an injector like grunt-wiredep that works for NPM dependencies?

Question

Most packages nowadays are available in both NPM and Bower. I have to have NPM around, but I'd like cut Bower out of the loop on my project.

I'm currently relying on grunt-wiredep to create <script> includes in my index.html. This tool looks at all of the Bower configs to pull all the necessary js and css files into my index.html for me.

Is there a tool that will do the same for NPM dependencies?

Terpsichorean

Answer 1

You would be able to do that using a module bundler like Browserify or Webpack.

For getting started with Browserify , you will need to first install it via NPM globally

npm install -g browserify

Then in your project , get the frontend library you want to include , like for example the angular library

npm install --save angular

Now you will need to use require() to make Browserify aware of the dependencies that it needs to fetch for the project to work (In case of Angular app, where you define the main module , add this first line)

var angular = require('angular');

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

For setting up the grunt-browserify task , first install it in the project

npm install grunt-browserify --save-dev

and configure the task as follows

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

Lastly in your index.html , you will need to add markup for the bundle.js script

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

Example code can be found at https://github.com/pra85/grunt-browserify-example

Abuttal

And the automatic injection for CSS? – Goodale

That can be done by using a broswerify plugin called parcelify , it works if you run it directly through the command line but with Grunt I have not been able to make it work , I have opened up an issue there ( github.com/rotundasoftware/parcelify/issues/39 ) , hoping somebody would advice how to integrate it successfully – Abuttal

This is not what the OP was asking for, and will lead many to a more complex solution than is necessarily needed. – Recession