Roots Discourse

Best practice when overriding main files of bower sub-dependencies


#1

tldr; I’m asking about best practices when installing a bower dependency which brings along it’s own dependencies.


I’ve come across a bit of a problem with the Javascript bower/gulp workflow.

In my example, I installed Isotope via bower install isotope --save. Now, Isotope’s bower.json has it’s main attribute set like so: "main": "js/isotope.js" , which is not actually the packaged version. That’s easy enough to override in my main bower.json:

"overrides": {
  "isotope": {
    "main": ["./dist/isotope.pkgd.min.js"]
  }
}

The problem is that Isotope brings along a whole bunch of it’s own dependencies. In my case it is:

"dependencies": {
    "get-size": "~1.2.2",
    "matches-selector": ">=1 <2",
    "outlayer": "~1.4.0",
    "masonry": "~3.3.0",
    "fizzy-ui-utils": "~1.0.1"
},

These all get installed by npm, and all have main files defined. So bower-main-files gets them all, gulp concatenates and minifies them all, and I get a giant Javascript file which doesn’t work at all.

Now, I’ve overridden them all specifically, which seems to work:

"overrides": {
    "isotope": {
      "main": ["./dist/isotope.pkgd.min.js"]
    },
    "get-size": {
        "ignore": true
    },
    "matches-selector": {
        "ignore": true
    },
    "outlayer": {
        "ignore": true
    },
    "masonry": {
        "ignore": true
    },
    "fizzy-ui-utils": {
        "ignore": true
    },
}

However, this feels fragile and rather arbitrary. I’m sure Isotope isn’t the only useful Bower package to bring along it’s dependencies in this way. Is there a better way of handling these instances?


Adding Infinite scroll to sage
#2

Could probably do

"overrides": {
    "isotope": {
      "main": ["./dist/isotope.pkgd.min.js"],
      "dependencies": {}
    }
}

Will look into this later


Main.js usage
#3

I like this simplicity


#4

@austin You can absolutely do that. I just tried and it worked perfectly. Thank you, that’s probably the simplest, most readable and best solution.


#5

isotope’s bower package looks like it is not configured properly. Asset-builder and the gulpfile handle child dependencies just fine, but the way isotope is set up is weird. For instance jQuery is a devDependency. That makes no sense.

The fix I suggested above makes sense though. You are essentially saying “no prefer to use the packaged version which has no dependencies”.

Prolly still fix isotope’s upstream though.


#6

Seems like the author’s philosophically opposed to using bower.json’s main in the way that Sage does.[1] I’ll make the request, but I think this may be a matter of opinion.

[1] https://github.com/metafizzy/isotope/issues/879


Adding Bower Files to Sage (8.0.0)
#7

It seems like that thread does have an answer though. If you want to use isotope as is without overrides, the one missing part is jquery-bridget, which is used for jQuery integration.

bower install --save jquery-bridget

and make sure that bridget is being included before isotope, and it should technically work.

TBH though, the end goal is isotope.pkgd.min.js anyways, so I would also probably just include that file and exclude all deps as austin showed earlier.


#8

I’m having the same problem as the guy in first post. When I launch bower install it downloads a lot of dependencies but I don’t need them because I load the packaged version (isotope.pkgd.js).

Adding the "dependencies": {} like said by @austin , the error gone but how can avoid to download all the dependencies?

This is my bower.json

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "modernizr": "2.8.2",
    "bootstrap-sass-official": "3.3.5",
    "isotope": "~2.2.1"
  },
  "overrides": {
    "modernizr": {
      "main": "./modernizr.js"
    },
    "bootstrap-sass-official": {
      "main": [
        "./assets/stylesheets/bootstrap/_variables.scss",
        "./assets/stylesheets/bootstrap/_mixins.scss",
        "./assets/stylesheets/bootstrap/_normalize.scss",
        "./assets/stylesheets/bootstrap/_type.scss",
        "./assets/stylesheets/bootstrap/_grid.scss",
        "./assets/stylesheets/bootstrap/_responsive-utilities.scss",
        "./assets/stylesheets/bootstrap/_tooltip.scss",
        "./assets/javascripts/bootstrap/transition.js",
        "./assets/javascripts/bootstrap/alert.js",
        "./assets/javascripts/bootstrap/button.js",
        "./assets/javascripts/bootstrap/carousel.js",
        "./assets/javascripts/bootstrap/collapse.js",
        "./assets/javascripts/bootstrap/dropdown.js",
        "./assets/javascripts/bootstrap/modal.js",
        "./assets/javascripts/bootstrap/tooltip.js",
        "./assets/javascripts/bootstrap/popover.js",
        "./assets/javascripts/bootstrap/scrollspy.js",
        "./assets/javascripts/bootstrap/tab.js",
        "./assets/javascripts/bootstrap/affix.js",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    },
    "isotope": {
      "main": [
        "./dist/isotope.pkgd.js"
      ],
      "dependencies": {}
    }

  }
}

#9

Just curious why downloading the dependencies is an issue for you


#10

Who said that’s a real issue? I prefer to not download MBs of unuseful dependencies, and asking for avoid it…


#11

What have you tried so far? Have you looked on Bower docs or repos to figure out how to accomplish what you’re wanting? This isn’t really a Sage question


#12

Thanks jodi, I also faced this problem and you saved me.


#13

Also encountered this problem (with flickity plugin specifically) and I couldn’t find the answer in the e-book. Could be a good idea to add this in a future edition.

Thanks for the solution, it seems to work for me as well.


#14

I just stumbled in from the interwebs I came across @austin’s answer a year after he posted it here, and it’s so far the best answer I’ve seen to this workflow problem.

For example, here’s a bit out of my bower.json file:

     "jquery": "^3.1.0",
    "flickity": "^2.0.2",
    "masonry": "^4.1.0"
  },
  "overrides" : {
    "masonry" : {
      "main" : ["dist/masonry.pkgd.js"],
      "dependencies" : {}
    },
    "jquery" : {
      "main" : ["dist/jquery.min.js"],
      "dependencies" : {}
    },
    "flickity" : {
      "main" : ["dist/flickity.pkgd.js", "dist/flickity.min.css"],
      "dependencies" : {}
    }```

… and then in my gulpfile.js

const bower  = require('main-bower-files');
gulp.task('bowerCSS', ['jekyllBuild'], function () {
  return gulp.src(bower('**/*.css'))
    .pipe(concat('vendor.min.css'))
    .pipe(postcss(processors))
    .pipe(gulp.dest('dist/resources/styles'));
});
gulp.task('bowerJS', ['jekyllBuild'], function () {
  return gulp.src(bower('**/*.js'))
    .pipe(concat('vendor.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/resources/scripts'));
});
gulp.task('bowerBuild', ['bowerJS', 'bowerCSS']);

Before …

After

Thanks all!

Also - I’ve now just discovered the WP tools @ roots.io and I’m pretty stoked to check them out. :smiley: