Best practice when overriding main files of bower sub-dependencies

sage
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?

1 Like
2

Could probably do

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

Will look into this later

5 Likes
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.

1 Like
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

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.

3 Likes
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 …

Screen Shot 2016-08-09 at 11.23.40 PM.png476×1016 72.2 KB

After

Screen Shot 2016-08-09 at 11.22.40 PM.png456×706 47.2 KB

Thanks all!

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

1 Like