使用多級源映射調試Javascript

Question

我有很多JavaScript文件，這些文件經過grunt uglify並分別縮小，並且進一步，我對它們進行grunt concat以獲得帶有源映射的單個捆綁的縮小文件。

防爆。

a.js，b.js，c.js ->丑化-> a.min.js，b.min.js，c.min.js ->的concat -> bundle.min.js

使用來自bundle.min.js的開發工具和源映射，我只能追溯到a.min.js / b.min.js / c.min.js。 我的目標是使用源映射來追溯到a.js / b.js / c.js。

Answer 1

您的要求可以實現，但是您需要將任務的順序更改為以下內容：

---

a.js, b.js, c.js --> 的concat --> bundle.js --> 丑化 --> bundle.min.js

---

注意：更改了任務的順序，以在拼合結果輸出之前連接各個.js文件。

為什么必須更改任務順序？

因為grunt-contrib- sourceMapIn提供了sourceMapIn選項，而grunt-contrib-concat卻沒有。 此外，通常的做法是在合並文件之前先對其進行串聯 。

sourceMapIn選項的描述如下：

sourceMapIn

類型： String Function

默認值： undefined

輸入源映射的位置來自早期的編譯（例如來自CoffeeScript）。 如果提供了函數，則將uglify源作為參數傳遞，並將返回值用作sourceMap名稱。 僅在只有一個源文件時才有意義。

Gruntfile.js

您的Gruntfile.js可以配置如下：

module.exports = function(grunt) {

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

  grunt.initConfig({
    concat: {
      options: {
        // ...
        sourceMap: true,
        sourceMapName: 'dist/js/bundle.map' // Specify path/name for sourceMap
      },
      my_target: {
        src: ['src/js/a.js', 'src/js/b.js', 'src/js/c.js'],
        dest: 'dist/js/bundle.js',
      },
    },
    uglify: {
      options: {
        // ...
        sourceMap: {
          includeSources: true
        },
        sourceMapIn: 'dist/js/bundle.map', // Specify the same path/name as
                                           // the `sourceMapName` value
                                           // in the `concat` task
      },
      my_target: {
        files: {
          'dist/js/bundle.min.js': ['dist/js/bundle.js']
        }
      }
    }
  });

  // Note we run the `concat` task before the `uglify` task.
  grunt.registerTask('default', ['concat:my_target', 'uglify:my_target']);
};

筆記：

1. 為concat.options.sourceMapName和uglify.options.sourceMapIn指定的路徑值必須相同，例如dist/js/bundle.map 。

2. concat任務必須在uglify任務之前運行。

3. 這兩個任務的src和dest路徑將需要根據您的項目要求進行定義。