CODEWITHSUNDEEP
javascripttwitter-bootstrapbrowserifycommonjsbrowserify-shim
miron
miron

Reputation: 1450

Using Bootstrap JS components with browserify-shim

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

Upvotes: 1

Views: 593

Answers (1)

YPCrumble
YPCrumble

Reputation: 28682

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.

Upvotes: 1

Related Questions