Laravel Webpack - トップレベル変数の不要な縮小

Question

私はメインの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に関連していることを理解していないようです。私。どちらもt.initialise = function {};になりません。

私はここで何をすべきですか？

私もロールアップを使ってみました。同じ種類の変数の縮小が行われます。

このような細分化/難読化は、特にパラメータ名の心配がほとんどない機能の内部動作において、優れています。しかし、トップレベルではありません。私はなぜこれが起こっているのか、それを防ぐ方法を理解していません。

アイデア？

webpackの設定を行う方法があるとします。例えば。内部ではwebpack.config.jsですが、webpackドキュメントをよく見ると、何らかの方法でプロパティの縮小を防ぐなど、これを解決するためにどのオプションを使用できるか簡単に理解できません。

Answer 1

laravel-elixir-webpackの公式コードには、minify()が適用されています。here,minify()は、デフォルトでは、マングリングがオンになっています。

マングリングは、ローカル変数の名前を通常1文字に減らす最適化です（これはに名前変更されたexampleオブジェクトを説明しています）。今のあなたはモジュール（ない理想的なソリューション）を使用する前にモンキーパッチにWebpackTask.prototype.gulpTask方法がある可能性がありますのでSee the doc here.

私は、あなたがlaravel-エリキシル-のWebPACKでminify()動作をカスタマイズすることができますどのような方法が表示されません。私がコメントしている行を見てください。

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()) 
    ); 
}; 

Answer 2

私は愚かでした。私は、トップレベルのプロパティがwindowにバインドされることによって縮小されるのを防ぐことができることを発見しました。これは、私がいつも知っていたものであり、より早く実現するのではないというばかげたものです。 D'oh！

var example = {};のようなすべてのトップレベルプロパティをappが助けているwindow.app.example = {};のように変更して、言語自体によって設定されたものをすべて無効にして上書きする必要がありました。