При создании нового проекта с нуля, ошибки браузера с «фундаментом не является функцией» - PullRequest
Новая
       7

При создании нового проекта с нуля, ошибки браузера с «фундаментом не является функцией»

0 голосов
/ 27 ноября 2018

После создания совершенно нового приложения Foundation 6 с foundation new, создания приложения с foundation build и загрузки приложения в веб-браузер я вижу следующую ошибку на консоли разработчика: 

Uncaught TypeError: o(...)(...).foundation is not a function
    at Module.<anonymous> (app.js:formatted:4175)
    at o (app.js:formatted:11)
    at Object.<anonymous> (app.js:formatted:4166)
    at o (app.js:formatted:11)
    at app.js:formatted:71
    at app.js:formatted:72

Что дает?Похоже, минификатор утратил ссылку на jquery, потому что эта строка, похоже, соответствует единственной строке в сгенерированном app.js, которая вызывает функцию .foundation().

версии для окон.браузер позднего хрома. 

$ foundation -v; npm -v; node -v; webpack -v
Foundation CLI version 2.2.5
6.4.1
v8.11.1
4.26.1

1 Ответ

0 голосов
/ 27 ноября 2018

tldr: используйте переменную Foundation, например, в app.js

import $ from 'jquery'
import whatInput from 'what-input'
window.$ = $
import Foundation from 'foundation-sites'
if (Foundation) {
  // if `Foundation` is left as an unused variable
  // webpack will exclude it from the build output;
  // therefore, any expression that uses it will work.
}
$(document).foundation()

для любопытных

вот как я нашел ответ

найтиправильные настройки карты источника

потребовалась некоторая настройка, но я нашел правильные настройки карты источника для devtool.измените webpackConfig на devtool: 'eval' в gulpfile.babel.js и соберите для производства с $ gulp build --production или $ foundation build.вы хотите, чтобы параметр eval использовался в рабочей среде.

проверьте источник

браузер по-прежнему генерирует исключения для неопределенного foundation, но на этот раз вы видите, кто должен был его определять.

разметка кода с комментариями после вызова, который вводит Foundation из "foundation-sites", и его сборка, затем перезагрузка браузера, вот содержимое app.js после его минимизации и сопоставления источника: 

// app.js comment i added
...
import Foundation from 'foundation-sites' // here, right?
...


// app.js minified
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var what_input__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
/* harmony import */ var what_input__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(what_input__WEBPACK_IMPORTED_MODULE_1__);


window.$ = jquery__WEBPACK_IMPORTED_MODULE_0___default.a;
 // here, right?

jquery__WEBPACK_IMPORTED_MODULE_0___default()(document).foundation();

и теперь мы получаем ошибку в консоли о последней строке: Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_0___default(...)(...).foundation is not a function

это безумие, где Foundation?

я думаюWebpack полностью пропустит импорт Foundation, если вы фактически не используете его в своем коде точки входа.догадавшись, что это так, я добавил консольное утверждение, которое напечатало console.info(Foundation) и бинго.Внезапно импортированные сайты Фонда

...