In Angular-Cli WebPack Skripte, ich will

Question

die gebündelten Skripte neu zu ordnen

ich auf Angular2 Projekt arbeiten. Ich benutzte Angular-CLI, um meine eckige App zu rüsten.

Angular-CLI verwenden standardmäßig WebPack, um viele Dinge zu handhaben, und eines dieser Dinge ist die Bündelung der Skripte.

Ich habe dieses Paket mit npm installiert: codrops-animated-header, das von mir verlangt, ein Skript über dem anderen einzufügen, also in angular-cli.json bestellte ich sie nach Bedarf (siehe die letzten 2 Zeilen: Ich möchte Last classie.js vor 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" 
    ], 

aber in der Konsole fand ich diesen Fehler:

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) 

und wenn ich das Bündel Skript überprüft fand ich, dass cbpAnimatedHeader.min.js kommt vor classie.js wie folgt:

/***/ 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" 

/***/ }, 

So ist es eine Möglichkeit, die gebündelten Skripte in WebPack mit Angular-cli oder ohne

Answer 1

Das ist nicht im Moment (Stand beta.24) unterstützt neu zu ordnen.

Sie müssen wahrscheinlich ein neues Github-Problem öffnen, um die Skripts gemäß der angular-cli.json-Konfiguration zu verwalten.