编译JS文件时的Webpack问题

Question

I am working on a Laravel 5.3 project, I have been using webpack with no issues until I tried to add some configurations for ES6. These included addind babel packages to my npm module. It broke my code so I reverted back all the changes but now whenever I change a JS file and compile, this line is added to the final JS file and it causes the Vue instance to be undefined (The line appears whenever I run gulp whether I change a file or not). I am using this package laravel-elixir-vue-2 and from what I have gathered(though I might be wrong) I do need any more configurations to run it successfully as I have been using it that way for a few months.

/***/ 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/"); 126 126

I have even cloned a previous version of my repo that was working but the issue persists. At first I thought that some PHPStorm settings I had done caused it but then I changed the editor to use Atom but the issue did not go away.

UPDATE I followed this link to install babel so that I can use ES6 format inside my .vue files but it broke my webpack instead. I have not used use strict anywhere in my code. I installed a clean git repo in another pc and it raised the issue too. Also it works where I have used vue outside .vue components

This is my gulpfile.js

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

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


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

Comment below if any further clarification is needed.

Answer 1

我仍然不知道是什么引入了use strict的use strict但是最佳实践是将v-if与任何无法定义的 变量一起使用