javascript - 在 Angular-Cli WebPack 脚本中，我想重新排序捆绑的脚本

Question

我正在从事 Angular2 项目。我使用 Angular-CLI 搭建了我的 Angular 应用程序。

Angular-CLI 默认使用 WebPack 来处理很多事情，其中​​之一就是打包脚本。

我使用 npm:codrops-animated-header 安装了这个包，它要求我在另一个脚本之上包含一个脚本，所以在 angular-cli.json 中我根据需要订购了它们(检查最后两行:我想加载cbpAnimatedHeader.min.js 之前的 classie.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 或不使用 Angular-cli 对 WebPack 中的捆绑脚本重新排序

Answer 1

目前不支持(从 beta.24 开始)。

您可能需要打开一个新的 Github 问题以根据 angular-cli.json 配置维护脚本顺序。