UglifyJS에서 예상치 못한 토큰 발생 : node_modules 키워드 (const)

내가 시작한 작은 프로젝트 는 변수 를 선언 하는 노드 모듈 ( npm을 통해 설치됨 )을 사용합니다 const. 이 프로젝트를 실행하고 테스트하는 것은 좋지만 UglifyJS가 실행되면 browserify가 실패합니다.

예기치 않은 토큰 : 키워드 (const)

다음은이 문제가없는 (즉, 특정 노드 모듈없이) 몇 가지 다른 과거 프로젝트에 성공적으로 사용한 일반적인 Gulp 파일입니다.

gulpfile.js

'use strict';

const browserify = require('browserify');
const gulp = require('gulp');
const source = require('vinyl-source-stream');
const derequire = require('gulp-derequire');
const buffer = require('vinyl-buffer');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const gutil = require('gulp-util');
const path = require('path');
const pkg = require('./package');
const upperCamelCase = require('uppercamelcase');

const SRC_PATH = path.dirname(pkg.main);
const DIST_PATH = path.dirname(pkg.browser);

const INPUT_FILE = path.basename(pkg.main);
const OUTPUT_FILE = path.basename(pkg.browser);

const MODULE_NAME = upperCamelCase(pkg.name);


gulp.task('default', () => {
  // set up the browserify instance on a task basis
  var b = browserify({
    entries: INPUT_FILE,
    basedir: SRC_PATH,
    transform: ['babelify'],
    standalone: MODULE_NAME,
    debug: true
  });

  return b.bundle()
    .pipe(source(OUTPUT_FILE))
    .pipe(buffer())
    .pipe(derequire())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .on('error', gutil.log)
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(DIST_PATH))
  ;
});

npm이 설치된 모듈에서 모두 교체하여 문제 const를 해결하려고 시도했으며 모든 var것이 정상입니다. 그래서 나는 실패를 이해하지 못합니다.

뭐가 잘못 const됐나요? 누군가 IE10을 사용하지 않는 한 모든 주요 브라우저가이 구문을 지원합니다.

해당 노드 모듈을 변경하지 않고이 문제를 해결할 수있는 방법이 있습니까?

최신 정보

나는 일시적으로 (또는 영구적으로) UglifyJS를 Butternut으로 대체했으며 작동하는 것 같습니다.

으로 ChrisR는 했나요 , UglifyJS 전혀 ES6를 지원하지 않습니다.

당신은 사용할 필요가 terser-웹팩 - 플러그인 ES6 위해 (웹팩 @ 5 uglification이 플러그인을 사용합니다)

npm install terser-webpack-plugin --save-dev

그런 다음 plugins배열 에서 정의하십시오.

const TerserPlugin = require('terser-webpack-plugin')

  new TerserPlugin({
    parallel: true,
    terserOptions: {
      ecma: 6,
    },
  }),

출처

UglifyJS는 es6를 지원하지 않습니다. constes6 선언이므로 오류가 발생합니다.

이상한 점은 사용하는 패키지가 어디서나 사용하기 위해 파일을 es5로 변환하지 않는다는 것입니다.

예를 들어 구성을 재사용하기 위해 UglifyJS를 계속 사용하려면 ES6 + 호환 버전 인 uglify-es를 사용하십시오 . ( 경고 : uglify-es되어 이제 포기 .)

그리고 Ser이 언급했듯이 이제 terser-webpack-plugin.

나는 같은 문제가 있었고 gulp 플러그인 gulp-uglify-es 가 문제를 해결했습니다.

가장 간단한 결정이라고 생각합니다.

다음을 설치하십시오.

npm i gulp-uglify-es --save-dev

그 후 코드 에서이 줄만 변경하십시오.

const uglify = require('gulp-uglify');

이에:

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

NB 속성 .default 가 중요하지 않으면 uglify가 함수가 아니라는 오류가 발생합니다.

위에서 언급했듯이 ES6 const 연산자의 일부로서 더 현대적인 es6 gulp 플러그인 "gulp-uglify-es"로만 처리 할 수 ​​있습니다.

나머지 코드는 변경할 필요가 없습니다.

친애하는!

리팩토링 한 Gulp 프로젝트에서이 문제가 발생했으며 어떤 이유로 공식 Terser Gulp 플러그인에 문제가있었습니다. 이것은 (gulp-terser) 아무런 문제없이 작동했습니다.

uglify-es-webpack-plugin을 사용하는 것이 더 좋습니다.

    const UglifyEsPlugin = require('uglify-es-webpack-plugin')



    module.exports = {
    plugins: [
            new UglifyEsPlugin({
                compress:{
                    drop_console: true
                }
            }),
    ] 
    }

PHPStorm의 GUI 내부 로 교체 UglifyJS했습니다 YUI Compressor JS. 이제 작동합니다.

이 접근 방식이 좋지 않다고 생각하지는 않지만 제 경우에는 한 번만 수행해야했고 잊어 버렸습니다. 그래서 방금 바벨의 웹 사이트 에 가서 es6에서 es5로 온라인으로 트랜스 파일하고 출력을 교체했습니다!