내가 시작한 작은 프로젝트 는 변수 를 선언 하는 노드 모듈 ( 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로 온라인으로 트랜스 파일하고 출력을 교체했습니다!
