Does Browserify override its own configuration when viewing a folder containing package.json?

Question

I created a simple JavaScript application using AngularJS .

I use npm and Bower to manage my Gulp dependencies to automate my tasks, and I want to use CommonJS ' module.exports / require() to bundle everything together: I decided to go to Browserify to bundle it all.

There, my very empty and clean project on Github , if you want to take a look.

---

To be able to require('angular') , I configured Browserify to fine tune AngularJS into available modules using browserify-shim . Pretty simple, here is the relevant part of my package.json :

 "browser": { "angular": "./bower_components/angular/angular.min.js" }, "browserify": { "transform": [ "browserify-shim" ] }, "browserify-shim": { "angular": { "exports": "angular" } } 

This is pretty neat, my main JS file now looks like this:

 'use strict'; var angular = require('angular'); angular.module('MyApp', []) .controller('View1Ctrl', ['$scope', require('./view1/view1.js')]) .controller('View2Ctrl', ['$scope', require('./view2/view2.js')]); 

And it works.

---

Now I'm trying to move on to more advanced materials using external libraries available through Bower . They are installed under bower_components and look the same as my project, they have package.json , bower.json and that’s it.

Take ng-dialog , for example, which also require('angular') . Having received through bower install ng-dialog --save , I do two things:

• Link your JS file with their answer with the keyword (say ng-dialog ) in my package.json
• require('ng-dialog') is basically the main JS file so that my Angular module depends on them.

Here's the updated corresponding part of my package.json (note that ng-dialog is not required):

 "browser": { "angular": "./bower_components/angular/angular.min.js", "ng-dialog": "./bower_components/ng-dialog/js/ngDialog.min.js" }, "browserify": { "transform": [ "browserify-shim" ] }, "browserify-shim": { "angular": { "exports": "angular" } } 

... and the updated app.js file:

 'use strict'; var angular = require('angular'); require('ng-dialog'); angular.module('MyApp', ['ngDialog']) .controller('View1Ctrl', ['$scope', require('./view1/view1.js')]) .controller('View2Ctrl', ['$scope', require('./view2/view2.js')]); 

I get the following error while the Browser is :

 Error: Cannot find module 'angular' from 'C:\...\bower_components\ng-dialog\js' 

After a good half hour of customization, it turned out that SIMPLY deletes the package.json file from bower_components/ng-dialog makes everything go smoothly.

What happens and how the hell should I combine this ngDialog.min.js ?

Answer 1

As indicated in the browser help guide

The modular system that views usage is the same as node, so packages published in npm, which were originally intended to be used in node, but not for browsers, will work fine in the browser too.

Increasingly, people publish modules for npm that are intentionally designed to work both in node and in the browser using a browser, and many packages on npm are intended to be used only in the browser. npm for all javascript , both front and backend.

So use the npm distribution of Angular and ngDialog , not bower ones

 npm install angular ng-dialog --save 

This saves you from having to do all the configuration in package.json and just calling require() in the project will do the job with the browser.

When we need any node module in the project, scan the packages with the file present in the main package.json field of the corresponding node module. Currently, the ngDialog.js file is specified as the main field of ngDialog, so you will need to change it to ngDialog.min.js in order for the browser to link this file. (This is not a serious problem as you are compressing your browser bundle with gulp-uglify )

I split your code and made the necessary changes. Check them out here https://github.com/pra85/angular-seed