Как создать исходные карты для файлов Uglified с помощью Grunt? - PullRequest
Новая
       99

Как создать исходные карты для файлов Uglified с помощью Grunt?

1 голос
/ 25 июня 2019

У меня есть проект Grunt, который использует Browserify и Uglify.Вот его основные биты: 

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, но у него больше нет необработанных источников в карте-источнике, существовавшей до Browserification.

Вот что содержится в результирующем файле карты источника: 

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

Я пытался использовать преобразование uglifyify для Browserify, но, похоже, он не генерирует такие маленькие файлы, как задача Uglify.

Я также обновил все свои зависимости до последней, но мне не удалось решить эту проблему.

1 Ответ

1 голос
/ 01 июля 2019

grunt-contrib-uglify имеет параметр sourceMapIn, который позволяет вам указать местоположение файла карты входного источника из более ранней компиляции, что в вашем сценарии является задачей browserify.

Однако, хотя установка browserifyOptions: { debug: true } в вашей задаче browserify генерирует встроенную исходную карту в результирующем файле .js (то есть в build/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 настроена на чтение 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

...