Laravel Webpack - 不需要的顶级变量缩小答案

【问题标题】：Laravel Webpack - Unwanted minification of top level variableLaravel Webpack - 不需要的顶级变量缩小
【发布时间】：2017-02-23 14:23:44
【问题描述】：

我的主 javascript 文件中有一个变量，例如var example = {};。

在 webpack 完成工作后，我发现 example 现在被引用为 t。当我在整个 Web 项目中使用该变量时，这给我带来了一个问题。例如，我将函数绑定到对象上：

var example = {};
example.initialise = function () {};

最后在页面底部我可以调用这部分脚本，例如：

<script>example.initialise()</script>

这种编写javascript函数的方式并不稀奇……

这显然是一个巨大的痛苦，因为我无法控制缩小。此外，webpack 似乎没有发现example.initialise = function () {}; 与它新缩小的var example (becoming)--> var t 相关。 IE。它也不会变成t.initialise = function {};。

我应该在这里做什么？

我也尝试过使用汇总。会发生相同类型的变量缩小。

问题是，这种缩小/混淆非常棒，尤其是在函数的内部工作中，几乎不需要担心参数名称。但不在顶层。我不明白为什么会发生这种情况，或者如何防止它。

有什么想法吗？

我假设有一些方法可以设置 webpack 的配置。例如。在 webpack.config.js 内部，但我对 webpack 文档的仔细阅读让我很难理解我可以使用哪些选项来解决这个问题，比如以某种方式防止属性缩小。

【问题讨论】：

你在使用 UglifyJsPlugin 和 webpack 吗？
@Bema 我怎么知道？我正在使用laravel-elixir-webpack-official
您的项目中有webpack.config.js 文件吗？
@Bema 我在项目中没有，但是 AFAIU，这不是必需的

标签： laravel webpack laravel-elixir rollupjs

【解决方案1】：

在 laravel-elixir-webpack-official 代码中，你可以看到 minify() 被应用 here，minify() 使用 UglifyJS2 并且默认开启 mangling。

Mangling 是一种优化，它通常将局部变量和函数的名称简化为单字母（这解释了您的 example 对象被重命名为 t）。 See the doc here.

我没有看到任何方法可以在 laravel-elixir-webpack 中自定义 minify() 行为，所以现在你可能需要在使用模块之前修改 WebpackTask.prototype.gulpTask 方法（不是理想的解决方案）。请参阅我注释掉的行。

const WebpackTask = require('laravel-elixir-webpack-official/dist/WebpackTask').default;

WebpackTask.prototype.gulpTask = function () {
    return (
        gulp
        .src(this.src.path)
        .pipe(this.webpack())
        .on('error', this.onError())
        // .pipe(jsFiles)
        // .pipe(this.minify()) 
        // .on('error', this.onError()) 
        // .pipe(jsFiles.restore)
        .pipe(this.saveAs(gulp))
        .pipe(this.onSuccess())
    );
};

【讨论】：

很快就会检查出来
一个有趣的想法，并且很好地调查了 Bema，感谢您对此的帮助。不过，我已经解决了这个问题，并将就我的简单解决方案发表回复！
很好 @Jonathan ，我不知道默认情况下禁用顶级 maging，只是在 UglifyJS 文档的深处发现了这一段：“顶级范围内的名称也被混淆（默认情况下我们不这样做）”

【解决方案2】：

原来我一直很傻。我发现您可以通过将顶级属性绑定到window... 来防止其被缩小，事后看来，这是我一直都知道的事情，而且很愚蠢，没有早点意识到这一点。哦！

因此，需要做的就是将所有顶级属性（如 var example = {};）更改为 window.app.example = {}; 之类的东西，其中 app 有助于命名空间，防止和覆盖语言本身设置的任何内容。

【讨论】：