javascript - attribute - UglifyJS lanza un token inesperado: palabra clave(const) con node_modules

title html css

Question

Un pequeño proyecto que comencé a utilizar es un módulo de nodo (instalado a través de npm ) que declara variables const . Ejecutar y probar este proyecto está bien, pero browserify falla cuando se ejecuta UglifyJS.

Token inesperado: palabra clave (const)

Aquí hay un archivo Gulp genérico que he estado usando con éxito para otros proyectos anteriores sin este problema (es decir, sin ese módulo de nodo en particular).

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))
;
});

He intentado arreglar esto reemplazando todo const a var en ese módulo instalado por npm, y todo está bien. Entonces no entiendo el fracaso.

¿Qué hay de malo con const ? A menos que alguien use IE10, todos los principales navegadores admiten esta sintaxis.

¿Hay alguna manera de arreglar esto sin requerir un cambio en ese módulo de nodo?

Actualizar

He reemplazado temporalmente (o permanentemente) UglifyJS con Butternut y parece que funciona.

Answer 1

Acabo de tener este problema con un proyecto de Gulp que refactoré y, por alguna razón, estaba teniendo problemas con el complemento oficial de Terser Gulp. Este (gulp-terser) funcionó sin problemas.

Answer 2

He reemplazado UglifyJS con YUI Compressor JS dentro de la GUI de PHPStorm. Ahora funciona.

Answer 3

Realmente no creo que este enfoque sea bueno, pero en mi caso tuve que hacer esto una vez y olvidarme de eso, así que simplemente fui al sitio web de babel , transpilé es6 a es5 en línea y reemplacé la salida.

Answer 4

UglifyJS no es compatible con es6. const es una declaración es6, por lo que arroja un error.

Lo extraño es que el paquete que utiliza no transpila sus archivos a es5 para ser utilizado en cualquier lugar.

Si aún desea usar UglifyJS (para reutilizar la configuración, por ejemplo), use la versión compatible con ES6 +, uglify-es . ( Advertencia : uglify-es ahora está abandonado ).

Y como mencionó Ser , ahora debe usar terser-webpack-plugin .

Answer 5

Usar uglify-es-webpack-plugin es mejor

 const UglifyEsPlugin = require(''uglify-es-webpack-plugin'')
module.exports = {
plugins: [
new UglifyEsPlugin({
compress:{
drop_console: true
}
}),
]
}

Answer 6

Actualización de noviembre de 2018:

Use terser-webpack-plugin para ES6 (webpack @ 5 usará este complemento para la uglificación)

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

Luego defina en su matriz de plugins

const TerserPlugin = require(''terser-webpack-plugin'')
new TerserPlugin({
parallel: true,
terserOptions: {
ecma: 6,
},
}),

Source