使用 Bootstrap JS 组件和 browserify-shim

Question

我正在尝试弄清楚如何正确使用 browserify-shim 与 bootstrap js 或任何其他组件一起进行。我并不总是想包含整个串联的 JS 文件，所以我将模块分成单个垫片，这是我的 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"]
  }
}

现在，当我在某处需要 twbs-alert 模块时，我可以将其包含在 require('twbs-alert') 中。这是你会怎么做还是拆分组件真的不重要，因为在缩小过程中无论如何都会删除未使用的组件？

编辑

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

Answer 1

在缩小过程中不会删除未使用的组件，因此您的方法很好。

与您的问题最相似的是人们如何避免从 Lodash/Underscore 导入未使用的组件。这在缩小过程中不能开箱即用。如果您使用的是 Babel，那么 a plugin 可以为这些库实现所需的结果。

您的一个选择是为 Bootstrap 编写您自己的类似 Babel 插件。

使用 Bootstrap JS 组件和 browserify-shim

Using Bootstrap JS components with browserify-shim

javascript

twitter-bootstrap

browserify

commonjs

browserify-shim