1

I am trying to figure out how to properly use browserify-shim in conduction with the bootstrap js or any other components. I don't always want to include the whole concatenated JS file so I splitted the modules in single shims, here's an excerpt from my package.json

"browserify": { "transform": ["browserify-shim"] }, "browser": { "twbs-affix": "./node_modules/bootstrap/js/affix.js", "twbs-alert": "./node_modules/bootstrap/js/alert.js", "twbs-carousel": "./node_modules/bootstrap/js/carousel.js", "twbs-collapse": "./node_modules/bootstrap/js/collapse.js", "twbs-dropdown": "./node_modules/bootstrap/js/dropdown.js", "twbs-modal": "./node_modules/bootstrap/js/modal.js", "twbs-popover": "./node_modules/bootstrap/js/popover.js", "twbs-scrollspy": "./node_modules/bootstrap/js/scrollspy.js", "twbs-tab": "./node_modules/bootstrap/js/tab.js", "twbs-tooltip": "./node_modules/bootstrap/js/tooltip.js", "twbs-transition": "./node_modules/bootstrap/js/transition.js", "jquery": "./node_modules/jquery/dist/jquery.js" }, "browserify-shim": { "jquery": "jQuery", "twbs-affix": { "depends": ["jquery"] }, "twbs-alert": { "depends": ["jquery"] }, "twbs-carousel": { "depends": ["jquery"] }, "twbs-collapse": { "depends": ["jquery"] }, "twbs-dropdown": { "depends": ["jquery"] }, "twbs-modal": { "depends": ["jquery"] }, "twbs-popover": { "depends": ["jquery"] }, "twbs-scrollspy": { "depends": ["jquery"] }, "twbs-tab": { "depends": ["jquery"] }, "twbs-tooltip": { "depends": ["jquery"] }, "twbs-transition": { "depends": ["jquery"] } }

Now when I need the twbs-alert module somewhere I can include it with require('twbs-alert'). Is this how you would do it or doesn't it really matter to split the components because the unused components would be removed anyway during the minification process ?

Edit

Since v4 of bootstrap is written completely in es6 the shim approach will be obsolete since you can import the modules via the import statement

Improve this question
4
  • whats the point of browserify bower components? Commented Feb 11, 2016 at 10:36
  • Bower+browserify in conduction with something like github.com/eugeneware/debowerify ? I'll give it a try, thanks. Commented Feb 11, 2016 at 10:55
  • Seems like there is no way of defining dependencies when you use the debowerify approach. Commented Feb 11, 2016 at 11:41
  • @webdeb usually the point is that many packages are only available on bower - bootstrap used to be one of those. Commented Feb 11, 2016 at 16:09

1 Answer 1

Reset to default
1

The unused components would not be removed during the minification process, so your approach is a good one.

The best analog to your question is how people try to avoid importing unused components from Lodash/Underscore. This does not work out of the box during minification. If you're using Babel there is a plugin that achieves the desired result for those libraries.

One option for you would be to write your own similar Babel plugin for Bootstrap.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I just looked at the v4 code of bootstrap and the code is written in es6 which would make the plugin obsolete when the version will be released. I think I'll wait till version 4 will be stable and use the shim approach for a while.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.