如何在ASP.NET中使用WebOptimizer生成SourceMap？

实现步骤 #

1. 注入环境判断对象
   在Startup.cs的ConfigureServices方法中，添加IWebHostEnvironment参数，用于识别当前运行环境。

2. 针对单个Bundle启用SourceMap
   创建JS/CSS Bundle时，通过链式调用GenerateSourceMap()方法，传入环境判断条件，仅在生产或预发布环境生成SourceMap。

修改后的代码示例：

public void ConfigureServices(IServiceCollection services, IWebHostEnvironment env)
{
    services.AddWebOptimizer(pipeline =>
    {
        // bundle .js files
        pipeline.AddJavaScriptBundle("/bundle.js", 
                                    "/assets/js/jquery-1.12.4.min.js",
                                    "/assets/js/crypto-js.4.0.0.min.js",
                                    "/assets/js/gijgo.min.js",
                                    "/assets/js/plugins.js",
                                    "/js/siriwave.umd.js",
                                    "/js/dat.gui.js",
                                    "/js/speech-bundle.js",
                                    "/js/pageLoad.js",
                                    "/assets/js/html2canvas.min.js")
                .GenerateSourceMap(env.IsProduction() || env.IsStaging()); // 按需启用SourceMap

        // bundle .css files
        pipeline.AddCssBundle("/bundle.css",
                                "/assets/css/slicknav.min.css",
                                "/assets/css/flaticon.min.css",
                                "/assets/css/animate.min.css")
                .GenerateSourceMap(env.IsProduction() || env.IsStaging()); // 按需启用SourceMap
    });

    // 其他服务配置...
}

3. 全局批量启用SourceMap（可选）
   如果需要给所有Bundle统一配置SourceMap，可通过WebOptimizerOptions全局设置：

public void ConfigureServices(IServiceCollection services, IWebHostEnvironment env)
{
    services.AddWebOptimizer();

    // 全局配置SourceMap
    services.Configure<WebOptimizerOptions>(options =>
    {
        if (env.IsProduction() || env.IsStaging())
        {
            options.GenerateSourceMaps = true;
        }
    });

    // 后续添加Bundle的代码...
}

注意事项 #

• SourceMap文件会自动生成在Bundle文件的同路径下（例如/bundle.js.map、/bundle.css.map），浏览器会自动识别加载。
• 确保原始资源文件的路径配置正确，WebOptimizer会自动完成SourceMap与原始文件的映射关联。

内容的提问来源于stack exchange，提问作者syed hussain haider zaidi