多级Source Map调试问题：如何从合并压缩JS追溯至原始文件

Got it, let's fix this source map chain issue so you can jump straight from bundle.min.js to your original a.js/b.js/c.js files. Here's how to adjust your Grunt configuration step by step:

First, make sure you're using recent versions of the plugins that support chained source map merging:

• Update grunt-contrib-uglify (needs support for including original source references)
• Update grunt-contrib-concat (needs support for consuming existing source maps)

Run this command to get the latest versions:

npm install grunt-contrib-uglify@latest grunt-contrib-concat@latest --save-dev

When compressing each original JS file, we need to generate source maps that retain links to the original files (not just the minified versions). Add these settings to your Gruntfile:

module.exports = function(grunt) {
  grunt.initConfig({
    uglify: {
      options: {
        // Enable source map generation for each minified file
        sourceMap: true,
        // Include the original source code directly in the map (or ensure path references are correct)
        sourceMapIncludeSources: true,
        // Set the root path to your original source files (adjust based on your project structure)
        // Example: if original files are in `src/` and minified files go to `dist/`, use '../src/'
        sourceMapRoot: '../src/'
      },
      // Define your individual compression targets
      files: {
        'dist/a.min.js': 'src/a.js',
        'dist/b.min.js': 'src/b.js',
        'dist/c.min.js': 'src/c.js'
      }
    },
    // Concat config will go here next
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
};

The key here is telling concat to use the source maps generated by uglify instead of creating a new map that only points to the minified files. Add this concat configuration:

concat: {
  options: {
    // Enable source map generation for the bundled file
    sourceMap: true,
    // Provide paths to the source maps of each minified input file
    sourceMapIn: [
      'dist/a.min.js.map',
      'dist/b.min.js.map',
      'dist/c.min.js.map'
    ]
  },
  dist: {
    src: ['dist/a.min.js', 'dist/b.min.js', 'dist/c.min.js'],
    dest: 'dist/bundle.min.js'
  }
}

Don't forget to load the concat plugin:

grunt.loadNpmTasks('grunt-contrib-concat');

Add a default task to run both steps in order:

grunt.registerTask('default', ['uglify', 'concat']);

1. Run grunt in your terminal to generate the files.
2. Open your project in Chrome DevTools (or another modern browser):
   • Go to the Sources panel
   • You should see your original a.js, b.js, c.js files listed (not just the minified versions)
   • When debugging code in bundle.min.js, clicking on a line number will jump directly to the corresponding line in the original source file

• Path Accuracy: Double-check the sourceMapRoot value in the uglify options. It should be a relative path from your minified file directory to your original source directory.
• DevTools Settings: Ensure "Enable JavaScript source maps" is turned on in your browser's DevTools settings.
• Map File Validation: Open bundle.min.js.map in a text editor and check the sources array— it should list paths to your original a.js/b.js/c.js files, not the minified versions.

内容的提问来源于stack exchange，提问作者Sumit Paliwal