gulp-uglify-es으로 객체의 property name까지 변경하는 법

properties: true

const gulp   = require('gulp'),
      uglify = require('gulp-uglify-es').default;


gulp.task('uglify', () => {
  return gulp.src('./static/**/*.js')
             .pipe(uglify({
              compress: {
                pure_funcs: [ 'console.log' ]
              },
              mangle: {
                properties: true
              }
             }))
             .pipe(gulp.dest('dist'));
});

gulp.task('default',  gulp.series(['uglify']));

uglify에서 mangle 설정을 저렇게 해주면 객체의 property name(key)까지 변경된다.

모든 property가 변경 됨...

헉 그런데 단순히 위의 설정으로는 모든 property를 변경해버렸다.
fetch로 가져온 응답값을 꺼내는 부분의 property name까지 변경해버려서 문제가 발생했다.

이럴 땐 아래 같이 설정해주면 된다.

keep_quoted : "strict"

const gulp   = require('gulp'),
      uglify = require('gulp-uglify-es').default;


gulp.task('uglify', () => {
  return gulp.src('./static/**/*.js')
             .pipe(uglify({
              compress: {
                pure_funcs: [ 'console.log' ]
              },
              mangle: {
                properties: {
                  keep_quoted : 'strict'
                },
              }
             }))
             .pipe(gulp.dest('dist'));
});

gulp.task('default',  gulp.series(['uglify'])); 

keep_quoted: 'strict' 설정을 주면 obj['name'] 꼴은 변경하지 않는다.

위 속성에 대한 설명은 아래와 같다

https://www.npmjs.com/package/terser#mangle-properties-options