如何使用 Grunt 為 Uglified 文件生成源映射？

Question

我有一個同時使用 Browserify 和 Uglify 的 Grunt 項目。 以下是它的核心部分：

browserify: {
  myapp: {
    options: {
      transform: ['babelify'],
      browserifyOptions: {
        debug: true
      },
    },
    src: 'src/index.js',
    dest: 'build/myapp.js'
  }
},

uglify: {
  options: {
    sourceMap: true,
    banner: bannerContent
  },
  target: {
    src: 'build/myapp.js',
    dest: 'build/myapp.min.js'
  }
},

它似乎生成了一個myapp.min.js.map文件，但它不再具有瀏覽器化之前存在的源映射中的原始源。

這是生成的源映射文件包含的內容：

{
  "version":3,
  "sources":[
    "myapp.js"
  ],
  "names":[
    ...
    ...
    ...
  ],
  "mappings":".........",
  "file":"myapp.min.js"
}

我已經嘗試對uglifyify使用uglifyify轉換，但這似乎沒有像 Uglify 任務那樣生成小文件。

我還將所有依賴項都更新到最新版本，但我無法解決此問題。

Answer 1

grunt-contrib-uglify sourceMapIn有一個sourceMapIn選項，允許您指定來自早期編譯的輸入源映射文件的位置 - 在您的場景中是browserify任務。

然而，雖然在您的browserify任務中設置browserifyOptions: { debug: true }確實會在結果.js文件（即build/myapp.js ）中生成一個內聯源映射，但問題的症結是雙重的：

1. 我們沒有可以配置后續grunt-contrib-uglify任務的sourceMapIn選項以使用的外部源映射文件。

2. grunt-browserify不提供創建外部.map文件的功能，它只創建內聯（見這里）

要解決上述問題，請考慮使用grunt-extract-sourcemap從build/myapp.js （即從您的browserify任務生成的輸出文件）中提取內聯源映射。

Gruntfile.js

以下要點顯示了您的Gruntfile.js應該如何配置：

module.exports = function (grunt) {

  grunt.initConfig({

      browserify: {
        myapp: {
          options: {
            transform: ['babelify'],
            browserifyOptions: {
              debug: true
            },
          },
          src: 'src/index.js',
          dest: 'build/myapp.js'
        }
      },

      extract_sourcemap: {
        myapp: {
          files: {
            'build': ['build/myapp.js']
          }
        }
      },

      uglify: {
        options: {
          sourceMap: true,
          sourceMapIn: 'build/myapp.js.map'
        },
        target: {
          src: 'build/myapp.js',
          dest: 'build/myapp.min.js'
        }
      }

  });

  grunt.loadNpmTasks('grunt-browserify');
  grunt.loadNpmTasks('grunt-extract-sourcemap');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Note the order of the tasks in your task list is important.
  grunt.registerTask('default', ['browserify', 'extract_sourcemap', 'uglify']);
};

解釋

1. 首先browserify任務調用它輸出一個新的文件（即build/myapp.js包含你捆綁的JavaScript和“內聯”源地圖信息）。 如果您在此階段檢查build/myapp.js的內容，它會在最后包含類似以下內容：

    //# sourceMappingURL=data:application/json;charset=utf-8;base64, ...

2. 接下來調用extract_sourcemap任務。 這實質上是從build/myapp.js提取“內聯”源映射信息，並將其寫入名為myapp.js.map的新文件，該文件保存在您的build目錄中。

   build/myapp.js的原始“內聯”源映射信息被替換為指向新生成的源映射文件的鏈接，即myapp.js.map 。 如果您檢查build/myapp.js的內容，您現在會注意到文件末尾的以下內容：

    //# sourceMappingURL=myapp.js.map

3. 最后調用uglify任務。 注意它的sourceMapIn選項如何配置為讀取build/myapp.js.map ，即我們在第 2 步生成的源映射文件。

   此任務創建您想要的build/myapp.min.js文件，其中包含； 您縮小的 JS，以及指向新生成的源映射文件build/myapp.min.js.map 。

注意最終生成的文件（即build/myapp.min.js ）現在正確映射回原始src/index.js文件和index.js本身可能具有import 'ed 或require() 'd 的任何文件