jquery - Bootstrap 4 使用 Codekit 3 编译 javascript 供应商错误

Question

我对我如何编译东西有点老派。我还在用codekit而不是 npm、grunt 等。我不擅长终端。

无论如何...我可以从我的 Bootstrap 4 repo 编译 SCSS 文件。 .但是当我尝试编译 javascript 供应商时出现错误。这是一个简单的错误，但如果有人能解释一下，那就太好了!

请参阅下面我如何将所有引导 js 供应商编译到我的 main.js 中。 javascript 文件。由于旧习惯，我没有包含 jQuery，我通常将最新的 CDN jQuery 内联。

// bootstrap 4 core js
// @codekit-prepend "js/src/alert"
// @codekit-prepend "js/src/button"
// @codekit-prepend "js/src/carousel"
// @codekit-prepend "js/src/collapse"
// @codekit-prepend "js/src/dropdown"
// @codekit-prepend "js/src/index"
// @codekit-prepend "js/src/modal"
// @codekit-prepend "js/src/tooltip"
// @codekit-prepend "js/src/popover"
// @codekit-prepend "js/src/scrollspy"
// @codekit-prepend "js/src/tab"
// @codekit-prepend "js/src/tooltip"
// @codekit-prepend "js/src/util"

// my shizzle
(function ($) {

  alert("WTF!");

});

所以当我使用 Codekit 3 运行这段代码时观看和编译。




我可以在不缩小它的情况下很好地编译它。但是当我缩小它时，我认为它使用了消息中的 UglifyJS(我认为)，这是 error我得到...

UglifyJS minification failed with this error: Parse error at /Users/joshmoto/Sites/joshmoto.wtf/development/assets/.codekit-cache/alert.js:1,7
import $ from 'jquery'
       ^
SyntaxError: Unexpected token: name ($)
    at JS_Parse_Error.get (eval at <anonymous> (/Applications/CodeKit.app/Contents/Resources/engines/node_modules/uglify-js/tools/node.js:27:1), <anonymous>:86:23)
    at /Applications/CodeKit.app/Contents/Resources/engines/node_modules/uglify-js/bin/uglifyjs:384:40
    at time_it (/Applications/CodeKit.app/Contents/Resources/engines/node_modules/uglify-js/bin/uglifyjs:620:15)
    at /Applications/CodeKit.app/Contents/Resources/engines/node_modules/uglify-js/bin/uglifyjs:345:9
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)

是什么东西坏了，还是这个新的 Bootstrap 4在编译文件中需要 jquery 吗？

任何帮助都将不胜感激，因为我在 bootstrap 3 中没有遇到这个问题。

我只是尝试使用非缩小脚本文件，但在 chrome 调试器中出现此错误...



所以是的，它是正确的。

Answer 1

我终于找到了解决我的主要 javascript 文件编译问题的方法。

我可以让文件编译的唯一方法是这样做......

/**
 ** Bootstrap 4 Core JS
 **/
// @codekit-prepend "vendor/jquery-3.3.1"
// @codekit-prepend "vendor/popper.min"

// @codekit-prepend "js/dist/alert"
// @codekit-prepend "js/dist/button"
// @codekit-prepend "js/dist/carousel"
// @codekit-prepend "js/dist/collapse"
// @codekit-prepend "js/dist/dropdown"
// @codekit-prepend "js/dist/tooltip"
// @codekit-prepend "js/dist/modal"
// @codekit-prepend "js/dist/popover"
// @codekit-prepend "js/dist/scrollspy"
// @codekit-prepend "js/dist/tab"
// @codekit-prepend "js/dist/util"

// jQuery
(function ($) {

    alert("Boom!");

})(jQuery);