编译 JS 文件时的 Webpack 问题

Question

我正在做一个 Laravel 5.3 项目，我一直在使用 webpack，没有任何问题，直到我尝试为 ES6 添加一些配置。这些包括将 babel 包添加到我的 npm 模块中。它破坏了我的代码，所以我恢复了所有更改，但现在每当我更改 JS 文件并编译时，这一行就会添加到最终的 JS 文件中，并导致 Vue 实例未定义（每当我运行 gulp 是否更改文件）。我正在使用这个包 laravel-elixir-vue-2 并且根据我收集到的信息（尽管我可能是错的）我确实需要更多的配置才能运行它成功，因为我已经以这种方式使用了几个月。

/***/ function(module, exports) { 124 125 eval("var g;\r\n\r\n// This works in non-strict mode\r\ng = (function() { return this; })();\r\n\r\ntry {\r\n\t// This works if eval is allowed (see CSP)\r\n\tg = g || Function(\"return this\")() || (1,eval)(\"this\");\r\n} catch(e) {\r\n\t// This works if the window reference is available\r\n\tif(typeof window === \"object\")\r\n\t\tg = window;\r\n}\r\n\r\n// g can still be undefined, but nothing to do about it...\r\n// We return undefined, instead of nothing here, so it's\r\n// easier to handle this case. if(!global) { ...}\r\n\r\nmodule.exports = g;\r\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiOC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8od2VicGFjaykvYnVpbGRpbi9nbG9iYWwuanM/MzY5OCJdLCJzb3VyY2VzQ29udGVudCI6WyJ2YXIgZztcclxuXHJcbi8vIFRoaXMgd29ya3MgaW4gbm9uLXN0cmljdCBtb2RlXHJcbmcgPSAoZnVuY3Rpb24oKSB7IHJldHVybiB0aGlzOyB9KSgpO1xyXG5cclxudHJ5IHtcclxuXHQvLyBUaGlzIHdvcmtzIGlmIGV2YWwgaXMgYWxsb3dlZCAoc2VlIENTUClcclxuXHRnID0gZyB8fCBGdW5jdGlvbihcInJldHVybiB0aGlzXCIpKCkgfHwgKDEsZXZhbCkoXCJ0aGlzXCIpO1xyXG59IGNhdGNoKGUpIHtcclxuXHQvLyBUaGlzIHdvcmtzIGlmIHRoZSB3aW5kb3cgcmVmZXJlbmNlIGlzIGF2YWlsYWJsZVxyXG5cdGlmKHR5cGVvZiB3aW5kb3cgPT09IFwib2JqZWN0XCIpXHJcblx0XHRnID0gd2luZG93O1xyXG59XHJcblxyXG4vLyBnIGNhbiBzdGlsbCBiZSB1bmRlZmluZWQsIGJ1dCBub3RoaW5nIHRvIGRvIGFib3V0IGl0Li4uXHJcbi8vIFdlIHJldHVybiB1bmRlZmluZWQsIGluc3RlYWQgb2Ygbm90aGluZyBoZXJlLCBzbyBpdCdzXHJcbi8vIGVhc2llciB0byBoYW5kbGUgdGhpcyBjYXNlLiBpZighZ2xvYmFsKSB7IC4uLn1cclxuXHJcbm1vZHVsZS5leHBvcnRzID0gZztcclxuXG5cblxuLy8vLy8vLy8vLy8vLy8vLy8vXG4vLyBXRUJQQUNLIEZPT1RFUlxuLy8gKHdlYnBhY2spL2J1aWxkaW4vZ2xvYmFsLmpzXG4vLyBtb2R1bGUgaWQgPSA4XG4vLyBtb2R1bGUgY2h1bmtzID0gMCJdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7Iiwic291cmNlUm9vdCI6IiJ9"); 126 126

我什至克隆了我的存储库的一个以前版本，它可以正常工作，但问题仍然存在。起初我以为我所做的一些 PHPStorm 设置导致了它，但后来我将编辑器更改为使用 Atom 但问题并没有消失。

更新我按照这个 link 安装了 babel，这样我就可以在我的 .vue 文件中使用 ES6 格式，但它却破坏了我的 webpack。我没有在我的代码中的任何地方使用 use strict 。我在另一台电脑上安装了一个干净的 git 存储库，它也引发了这个问题。它也适用于我在 .vue 之外使用 vue 的地方组件

这是我的gulpfile.js

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');


elixir(function(mix) {
    mix.sass('app.scss')
       .webpack('app.js');
});

如果需要进一步说明，请在下方评论。

Answer 1

我仍然不知道是什么引入了 use strict，但最佳做法是将 v-if 与任何变量一起使用 [=14] =]未定义

编译 JS 文件时的 Webpack 问题

Webpack issue when compiling JS files

javascript

laravel

webpack

vue.js

vue-component