在Angular-Cli WebPack脚本中,我想对绑定的脚本重新sorting

我在Angular2项目上工作。 我使用Angular-CLI脚手架angular度的应用程序。

Angular-CLI默认使用WebPack来处理很多事情,其中​​一个就是捆绑脚本。

我使用npm:codrops-animated-header安装了这个包,需要我包含一个脚本到另一个之上,所以在angular-cli.json中,我根据需要对它们进行了sorting(检查最后2行:我要加载classie.js之前cbpAnimatedHeader.min.js):

"scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js", "../node_modules/codrops-animated-header/js/classie.js", "../node_modules/codrops-animated-header/js/cbpAnimatedHeader.min.js" ], 

但在控制台我发现这个错误:

 Uncaught TypeError: Cannot read property 'classList' of null at Object.addClass (eval at module.exports (http://localhost:4200/scripts.bundle.js:1:1), <anonymous>:33:9) at d (eval at module.exports (http://localhost:4200/scripts.bundle.js:1:1), <anonymous>:11:262) at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:100298:35) at Zone.runTask (http://localhost:4200/vendor.bundle.js:100174:47) at ZoneTask.invoke (http://localhost:4200/vendor.bundle.js:100368:33) at data.args.(anonymous function) (http://localhost:4200/vendor.bundle.js:101247:25) 

当我检查捆绑脚本我发现cbpAnimatedHeader.min.js之前classie.js如下所示:

  /***/ 782: /***/ function(module, exports) { module.exports = "/**\n * cbpAnimatedHeader.min.js v1.0.0\n * http://www.codrops.com\n *\n * Licensed under the MIT license.\n * http://www.opensource.org/licenses/mit-license.php\n * \n * Copyright 2013, Codrops\n * http://www.codrops.com\n */\nvar cbpAnimatedHeader=(function(){var b=document.documentElement,g=document.querySelector(\".cbp-af-header\"),e=false,a=300;function f(){window.addEventListener(\"scroll\",function(h){if(!e){e=true;setTimeout(d,250)}},false)}function d(){var h=c();if(h>=a){classie.add(g,\"cbp-af-header-shrink\")}else{classie.remove(g,\"cbp-af-header-shrink\")}e=false}function c(){return window.pageYOffset||b.scrollTop}f()})();" /***/ }, /***/ 783: /***/ function(module, exports) { module.exports = "/*!\n * classie - class helper functions\n * from bonzo https://github.com/ded/bonzo\n * \n * classie.has( elem, 'my-class' ) -> true/false\n * classie.add( elem, 'my-new-class' )\n * classie.remove( elem, 'my-unwanted-class' )\n * classie.toggle( elem, 'my-class' )\n */\n\n/*jshint browser: true, strict: true, undef: true */\n/*global define: false */\n\n( function( window ) {\n\n'use strict';\n\n// class helper functions from bonzo https://github.com/ded/bonzo\n\nfunction classReg( className ) {\n return new RegExp(\"(^|\\\\s+)\" + className + \"(\\\\s+|$)\");\n}\n\n// classList support for class management\n// altho to be fair, the api sucks because it won't accept multiple classes at once\nvar hasClass, addClass, removeClass;\n\nif ( 'classList' in document.documentElement ) {\n hasClass = function( elem, c ) {\n return elem.classList.contains( c );\n };\n addClass = function( elem, c ) {\n elem.classList.add( c );\n };\n removeClass = function( elem, c ) {\n elem.classList.remove( c );\n };\n}\nelse {\n hasClass = function( elem, c ) {\n return classReg( c ).test( elem.className );\n };\n addClass = function( elem, c ) {\n if ( !hasClass( elem, c ) ) {\n elem.className = elem.className + ' ' + c;\n }\n };\n removeClass = function( elem, c ) {\n elem.className = elem.className.replace( classReg( c ), ' ' );\n };\n}\n\nfunction toggleClass( elem, c ) {\n var fn = hasClass( elem, c ) ? removeClass : addClass;\n fn( elem, c );\n}\n\nvar classie = {\n // full names\n hasClass: hasClass,\n addClass: addClass,\n removeClass: removeClass,\n toggleClass: toggleClass,\n // short names\n has: hasClass,\n add: addClass,\n remove: removeClass,\n toggle: toggleClass\n};\n\n// transport\nif ( typeof define === 'function' && define.amd ) {\n // AMD\n define( classie );\n} else {\n // browser global\n window.classie = classie;\n}\n\n})( window );\n" /***/ }, 

那么,有什么方法可以使用Angular-cli对WebPack中的捆绑脚本进行重新sorting,或者不使用它

目前还不支持(截止到beta.24)。

您可能需要按照angular-cli.jsonconfiguration打开一个新的Github问题来维护脚本顺序。