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完全写在es6中，因此您可以通过import statement

导入模块，因此垫片方法将过时

Answer 1

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

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

您可以选择为Bootstrap编写自己类似的Babel插件。

使用带有browserify-shim

1 个答案: