В сценариях Angular-Cli WebPack я хочу изменить порядок связанных сценариев

Я работаю над проектом Angular2. Я использовал Angular-CLI для создания своего углового приложения.

Angular-CLI по умолчанию использует WebPack для обработки множества вещей, и одна из этих вещей — объединение скриптов.

Я установил этот пакет с помощью npm: codrops-animated-header, который потребовал от меня включить один скрипт над другим, поэтому в angular-cli.json я заказал их по мере необходимости (проверьте последние 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"

/***/ },

Итак, есть ли способ переупорядочить связанные скрипты в WebPack с помощью Angular-cli или без него?


person Marzouk    schedule 27.12.2016    source источник


Ответы (1)


В настоящее время это не поддерживается (начиная с бета-версии 24).

Вам, вероятно, потребуется открыть новую проблему Github, чтобы сохранить порядок скриптов в соответствии с конфигурацией angular-cli.json.

person Meligy    schedule 27.12.2016
comment
Спасибо, я открыл новую проблему на github, но сейчас мне интересно, есть ли способ найти обходной путь? - person Marzouk; 27.12.2016
comment
Вы можете попробовать вызвать файлы через импорт, например import 'package/path/file.js'; или import * as whatever from package/path/file.js;. Хотя не уверен, что это сработает. - person Meligy; 27.12.2016