4

System.Web.OptimizationMVC 5 Web アプリケーションで JavaScript および CSS ファイルをバンドルおよび縮小するために、標準構成であると思われる v1.3 を使用しています。ほとんどの場合、これは非常にうまく機能しますが、縮小プロセスによって JavaScript が破損するケースを発見しました。

以下は、もともと AngularJS の入力検証ディレクティブだったものを簡略化したものです。

var myApp;
(function (myApp) {
    myApp.module.directive("validator", [
        function () {
            return {
                link: function (scope, element) {
                    var validators = [
                        { signal: "required", message: "Please enter a value", value: null },
                        { signal: "email", message: "Please enter a valid email address", value: null }
                    ];
                    $("input", element).on("blur", function () {
                        for (var i in validators) {
                            var validator = validators[i];
                            if (scope.$parent.form[scope.modelName].$error[validator.signal]) {
                                element.removeClass("has-success");
                                scope.errorMessage = myApp.Utility.formatString(validator.message, eval(validator.value));
                                break;
                            }
                        }
                    });
                }
            };
        }
    ]);
})(myApp || (myApp = {}));

上記のコードは (トリミングされているため) 役に立ちませんが、縮小の問題を示しています。縮小すると、結果の JavaScript は次のようになります。

var myApp;

function(n){
    n.module.directive("validator",[
        function(){
            return{
                link:function(t,i){
                    var r=[
                        {signal:"required",message:"Please enter a value",value:null},
                        {signal:"email",message:"Please enter a valid email address",value:null}
                    ];

                    $("input",i).on("blur",function(){
                        var i,
                        validator;

                        for(i in r)
                            if(validator=r[i],t.$parent.form[t.modelName].$error[validator.signal]){
                                i.removeClass("has-success");
                                t.errorMessage=n.Utility.formatString(validator.message,eval(validator.value));
                                break
                            }

                    })
                }
            }
        }
    ])
})(myApp||(myApp={}))

元のコードではループ変数が使用されているにもかかわらず、縮小化によってパラメーター名と関数がtどのように割り当てられているかに注目してください。ilinki

言うまでもなく、これはコードを壊します。この場合、ループ変数の名前を変更することで修正できますが、私が認識していない の縮小化に他の悪影響がある可能性があることを懸念していJsMinifyます。

したがって、この問題に関連して 3 つの質問があります。

  • これは小型化のバグであると仮定するのは正しいですか? もしそうなら、どこかに報告すべきですか?
  • 縮小されたコードでこの問題の他のインスタンスを見つける実用的な方法はありますか?
  • で使用されている JavaScript 縮小エンジンを置き換えることは可能 System.Web.Optimizationですか。

事前に、あなたのアイデアに感謝します。ティム

更新: さらに調査を行った結果、実際にはWebGreaseに代わって縮小を実行しているのはSystem.Web.Optimization、この問題であることがわかりました。これは私の最初の質問に答えているようですが、代替のミニファイアーに関するアドバイスをいただければ幸いです。

4

2 に答える 2

2

以前、YUI Compressor のJava からの .NET ポートであるYUI Compressor for .Net (現在は GitHub に移動しました) を使用して成功しました。これの素晴らしい点は、Mozilla の Rhino JavaScript インタープリターに基づいていることです。つまり、正規表現を実行するだけでなく、実際にコードを理解します。その結果、JavaScript 構文エラーがあるとビルドに失敗します。

于 2015-01-21T14:07:04.570 に答える
1

Bundle Transformer ( https://bundletransformer.codeplex.com/ ) がうまく機能することがわかりました。YUI、JSMin、Microsoft Ajax Minifier など、多数のミニファイア オプションがあります。

Global.asax.cs のコード例:

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        var yuiMinifier = new BundleTransformer.Yui.Minifiers.YuiJsMinifier();
        var customerTransformer = new BundleTransformer.Core.Transformers.ScriptTransformer(yuiMinifier);

        var customBundle = new BundleTransformer.Core.Bundles.CustomScriptBundle("~/js/my-javascript.min.js");
        customBundle.Include("~/js/script1.js");
        customBundle.Include("~/js/script2.js");
        customBundle.Transforms.Clear();
        customBundle.Transforms.Add(customerTransformer);

        BundleTable.Bundles.Add(customBundle);
    }
}

注: 私にとっては、web.config でデバッグ モードが false に設定されている場合にのみ縮小が発生しました。

于 2015-12-02T20:39:09.890 に答える