使用带有 browserify-shim 的 Bootstrap JS 组件答案

【问题标题】：Using Bootstrap JS components with browserify-shim使用带有 browserify-shim 的 Bootstrap JS 组件
【发布时间】：2016-05-22 01:56:20
【问题描述】：

我正在尝试弄清楚如何正确使用 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 编写，shim 方法将过时，因为您可以通过 import statement 导入模块

【问题讨论】：

browserify bower 组件有什么意义？
Bower+browserify 与github.com/eugeneware/debowerify 类似？我试试看，谢谢。
使用 debowerify 方法时似乎无法定义依赖关系。
@webdeb 通常的重点是许多软件包仅在 bower - bootstrap used to be one of those 上可用。

标签： javascript twitter-bootstrap browserify commonjs browserify-shim

【解决方案1】：

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

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

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

【讨论】：

我刚刚看了bootstrap的v4代码，代码是用es6编写的，当版本发布时，插件会过时。我想我会等到版本 4 稳定并使用 shim 方法一段时间。