2

我有一个同时使用 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"
}

我已经尝试使用uglifyifyBrowserify 的转换，但它似乎不会像 Uglify 任务那样生成小文件。

我也将所有依赖项都升级到了最新版本，但我无法解决这个问题。

4

1 回答 1

1

grunt-contrib-uglify有一个sourceMapIn选项允许您从早期编译中指定输入源映射文件的位置 - 在您的场景中是browserify任务。

但是，虽然browserifyOptions: { debug: true }在您的任务中设置确实会在结果文件（即 in ）browserify中生成内联源映射，但问题的症结是双重的：.jsbuild/myapp.js

  1. 我们没有可以配置sourceMapIn后续grunt-contrib-uglify任务的选项以使用的外部源映射文件。

  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选项是如何配置为 readbuild/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 的文件

于 2019-07-01T15:21:29.050 回答