Uglifying Bootstrap ES6 JS 代码导致“Modal redeclared”问题答案

【问题标题】：Uglifying Bootstrap ES6 JS code causes "Modal redeclared" issueUglifying Bootstrap ES6 JS 代码导致“Modal redeclared”问题
【发布时间】：2018-03-22 22:05:58
【问题描述】：

我在尝试使用 Grunt 丑化 Bootstrap 4 JS 代码时收到错误“Modal redeclared”。我发现那些是 ES6，所以我找到了ES6 Uglify for Grunt。我正在使用以下依赖项

"bootstrap": "~4.0.0",
"grunt": "~1.0.1",
"grunt-contrib-uglify-es": "git://github.com/gruntjs/grunt-contrib-uglify.git#harmony",

等等。完整的错误是：

>> Uglifying source source/js/site.js failed.
Warning: Uglification failed.
Modal redeclared.
Line 1808 in source/js/site.js

那一行写着const Modal = (($) => {

我不确定如何使用 Grunt 编译或丑化这些 JS 文件。关于我能做什么的任何想法？

感谢您的帮助。

【问题讨论】：

您是否尝试过使用mangle 选项？这应该可以防止变量名称重叠。
我没试过。我什至没有将其视为 Grunt 版本的 Uglify 的选项。我明天试试
@Jack 我尝试了 mangle 选项，但没有运气。我尝试了各种方式。还有其他想法吗？

标签： npm gruntjs bootstrap-4 es6-modules grunt-contrib-uglify

【解决方案1】：

我的问题在于文件的编译顺序。我附上了正确的方法。我注意到的事情：

Util 应该是第一位的
索引排在最后
弹出框必须在工具提示之后加载

"build": {
   "src": [
   "node_modules/bootstrap/js/src/util.js",
    "node_modules/bootstrap/js/src/alert.js",
    "node_modules/bootstrap/js/src/button.js",
    "node_modules/bootstrap/js/src/carousel.js",
    "node_modules/bootstrap/js/src/collapse.js",
    "node_modules/bootstrap/js/src/dropdown.js",
    "node_modules/bootstrap/js/src/modal.js",
    "node_modules/bootstrap/js/src/scrollspy.js",
    "node_modules/bootstrap/js/src/tab.js",
    "node_modules/bootstrap/js/src/tooltip.js",
    "node_modules/bootstrap/js/src/popover.js",
    "node_modules/bootstrap/js/src/index.js",
    "source/assets/js/*.js"
    ],
   "dest": "source/js/site.js"
}

是的

【讨论】：

哦，我明白了。我认为您应该使用browserify 并在必要时要求这些文件。然后你就可以丑化你自己的代码了。
感谢您的提示！因为我已经拨入了这些，所以我会看看未来的构建。看起来 browserify 和 watchify 很好用