1

我试图弄清楚如何正确使用 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 的 bootstrap完全用 es6 编写，shim 方法将过时，因为您可以通过import 语句导入模块

4

1 回答 1

1

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

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

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

于 2016-02-11T16:16:58.857 回答