编译 JS 文件时的 Webpack 问题

Posted 2023-02-23

【中文标题】编译 JS 文件时的 Webpack 问题

【英文标题】：Webpack issue when compiling JS files

【发布时间】：2017-06-10 06:51:08

【问题描述】：

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

/***/ 功能（模块，出口） 124 125 eval("var g;\r\n\r\n// 这在非严格模式下有效\r\ng = (function() return this; )();\r\n\r\ntry \r\n\t// 如果允许 eval，则此方法有效（参见 CSP）\r\n\tg = g || Function(\"return this\")() || (1,eval)(\" this\");\r\n catch(e) \r\n\t// 如果窗口引用可用，则此方法有效\r\n\tif(typeof window === \"object\")\ r\n\t\tg = window;\r\n\r\n\r\n// g 仍然可以是未定义的，但无所谓...\r\n// 我们返回未定义，而不是这里什么都没有，所以它\r\n// 更容易处理这种情况。 if(!global) ...\r\n\r\nmodule.exports = g;\r\n//# sourceMappingURL =数据：应用程序/ JSON;字符集= UTF-8; BASE64，eyJ2ZXJzaW9uIjozLCJmaWxlIjoiOC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8od2VicGFjaykvYnVpbGRpbi9nbG9iYWwuanM / MzY5OCJdLCJzb3VyY2VzQ29udGVudCI6WyJ2YXIgZztcclxuXHJcbi8vIFRoaXMgd29ya3MgaW4gbm9uLXN0cmljdCBtb2RlXHJcbmcgPSAoZnVuY3Rpb24oKSB7IHJldHVybiB0aGlzOyB9KSgpO1xyXG5cclxudHJ5IHtcclxuXHQvLyBUaGlzIHdvcmtzIGlmIGV2YWwgaXMgYWxsb3dlZCAoc2VlIENTUClcclxuXHRnID0gZyB8fCBGdW5jdGlvbihcIn JldHVybiB0aGlzXCIpKCkgfHwgKDEsZXZhbCkoXCJ0aGlzXCIpO1xyXG59IGNhdGNoKGUpIHtcclxuXHQvLyBUaGlzIHdvcmtzIGlmIHRoZSB3aW5kb3cgcmVmZXJlbmNlIGlzIGF2YWlsYWJsZVxyXG5cdGlmKHR5cGVvZiB3aW5kb3cgPT09IFwib2JqZWN0XCIpXHJcblx0XHRnID0gd2luZG93O1xyXG59XHJcblxyXG4vLyBnIGNhbiBzdGlsbCBiZSB1bmRlZmluZWQsIGJ1dCBub3RoaW5nIHRvIGRvIGFib3V0IGl0Li4uXHJcbi8vIFdlIHJldHVybiB1bmRlZmluZWQsIGluc3RlYWQgb2Ygbm90aGluZyBoZXJlLCBzbyBpdCdzXHJcbi8vIGVhc2llciB0byBoYW5kbGUgdGhpcyBjYXNlLiBpZighZ2xvYmFsKSB7IC4uLn1cclxuXHJcbm1vZHVsZS5leHBvcnRzID0gZztcclxuXG5cblxuLy8vLy8vLy8vLy8vLy8vLy8vXG4vLyBXRUJQQUNLIEZPT1RFUlxuLy8gKHdlYnBhY2spL2J1aWxkaW4vZ2xvYmFsLmpzXG4vLyBtb2R1bGUgaWQgPSA4XG4vLyBtb2R1bGUgY2h1bmtzID0gMCJdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7Iiwic291cmNlUm9vdCI6IiJ9" ）; 126 126

我什至克隆了以前版本的我的 repo，它正在运行，但问题仍然存在。一开始我以为是我做的一些 phpStorm 设置导致了它，但后来我将编辑器更改为使用 Atom，但问题并没有消失。

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

这是我的 gulpfile.js

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

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


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

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

【问题讨论】：

你能添加你的 webpack.config.js 吗？

我没有那个文件。我之前不需要它。我尝试添加一个，但我删除了它。

可能想删除 node_modules 然后重新安装所有的包。这不应该在源代码控制中，并且恢复到以前的版本不会影响它 - 它仍然会包含新的包。

我已经试过了，还是报错

【参考方案1】：

我仍然不知道是什么引入了use strict，但最佳做法是将v-if 与任何可以未定义

的

变量

一起使用