System.Web.Optimization压缩箭头函数报错的配置解决咨询

Absolutely! You can fix this ES6 arrow function error with System.Web.Optimization by adjusting your bundle configuration. The root issue is that the default JavaScript minifier used by System.Web.Optimization (Microsoft Ajax Minifier) doesn’t support ES6 syntax like arrow functions out of the box. Here are two reliable solutions:

Option 1: Update AjaxMin and Enable ES6 Support #

If you want to stick with the default minifier ecosystem, you can upgrade to a newer version of AjaxMin that supports ES6 and configure your bundle to allow ES6 syntax:

1. Install the latest AjaxMin package via NuGet:
   Search for AjaxMin in the NuGet Package Manager and install the most recent version (v5.14+ includes ES6 support).

2. Modify your BundleConfig.cs to configure the minifier with ES6 enabled:

   using AjaxMin;
   using System.Web.Optimization;
   
   public class BundleConfig
   {
       public static void RegisterBundles(BundleCollection bundles)
       {
           // Enable optimizations (ensure this is set to true in production)
           BundleTable.EnableOptimizations = true;
   
           // Create your script bundle
           var customJsBundle = new ScriptBundle("~/bundles/custom-scripts")
               .Include("~/Scripts/your-script-with-arrow-functions.js");
   
           // Configure AjaxMin to allow ES6 syntax
           customJsBundle.Transforms.Add(new JsMinify(new CodeSettings
           {
               AllowES6 = true, // Critical setting to enable ES6 support
               EvalTreatment = EvalTreatment.MakeImmediateSafe,
               PreserveImportantComments = false
           }));
   
           bundles.Add(customJsBundle);
       }
   }
   

Option 2: Use BundleTransformer + Babel (Recommended) #

For better long-term compatibility (including support for older browsers that don’t understand ES6), use BundleTransformer to transpile your ES6 code to ES5 before minification:

1. Install required NuGet packages:
   Install BundleTransformer.Core, BundleTransformer.Babel, and BundleTransformer.MicrosoftAjax (or your preferred minifier).

2. Update your Web.config to register the Babel translator:

   <configuration>
     <configSections>
       <section name="bundleTransformer" type="BundleTransformer.Core.Configuration.BundleTransformerConfiguration, BundleTransformer.Core" />
     </configSections>
   
     <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
       <core>
         <js>
           <translators>
             <add name="BabelTranslator" type="BundleTransformer.Babel.Translators.BabelTranslator, BundleTransformer.Babel" enabled="true">
               <settings>
                 <presets>
                   <add name="@babel/preset-env" /> <!-- Transpiles ES6+ to compatible ES5 -->
                 </presets>
               </settings>
             </add>
           </translators>
           <minifiers>
             <add name="MicrosoftAjaxJsMinifier" type="BundleTransformer.MicrosoftAjax.Minifiers.MicrosoftAjaxJsMinifier, BundleTransformer.MicrosoftAjax" enabled="true" />
           </minifiers>
         </js>
       </core>
     </bundleTransformer>
   </configuration>
   

3. Adjust BundleConfig.cs to use BundleTransformer’s pipeline:

   using BundleTransformer.Core.Builders;
   using BundleTransformer.Core.Orderers;
   using BundleTransformer.Core.Transforms;
   using System.Web.Optimization;
   
   public class BundleConfig
   {
       public static void RegisterBundles(BundleCollection bundles)
       {
           BundleTable.EnableOptimizations = true;
           bundles.Clear(); // Remove default transforms
   
           var scriptBundle = new ScriptBundle("~/bundles/custom-scripts")
               .Include("~/Scripts/your-script-with-arrow-functions.js");
   
           // Add transpilation and minification transforms
           scriptBundle.Transforms.Add(new ScriptTransformer());
           scriptBundle.Transforms.Add(new JsMinify());
   
           // Use BundleTransformer's builders to bypass default ordering
           scriptBundle.Builder = new NullBuilder();
           scriptBundle.Orderer = new NullOrderer();
   
           bundles.Add(scriptBundle);
       }
   }
   

Both approaches will resolve the js1195 error. Option 2 is recommended because it ensures your code works across all browsers, not just those that support ES6 natively.

内容的提问来源于stack exchange，提问作者Simple Code