从头开始创建新项目时，浏览器会显示“基础不是功能”错误

Question

在使用foundation new创建一个全新的Foundation 6应用程序，使用foundation build构建该应用程序并在Web浏览器中加载该应用程序之后，在开发者控制台上看到以下错误：

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

有什么作用？似乎minifier丢失了对jquery的引用，因为该行似乎与生成的app.js中唯一调用.foundation()函数的行相关。

Windows上的

版本。浏览器是最新版。

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

Answer 1

tldr：使用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: 'eval'

出于好奇

这是我找到答案的方法

找到正确的源地图设置

进行了一些调整，但是我发现了devtool的正确源映射设置。将gulpfile.babel.js中的webpackConfig更改为$ gulp build --production并使用$ foundation build或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

那太疯狂了，console.info(Foundation)在哪里？

我猜想webpack将完全跳过导入Foundation，除非您在入口点代码中实际使用了它。在猜测是这种情况之后，我添加了控制台语句，该语句打印了dplyr和bingo。突然导入了基金会站点。