javascript - attribute - UglifyJS lanza un token inesperado: palabra clave(const) con node_modules
title html css (6)
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.
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.
He reemplazado
UglifyJS
con
YUI Compressor JS
dentro de la GUI de PHPStorm. Ahora funciona.
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.
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
.
Usar uglify-es-webpack-plugin es mejor
const UglifyEsPlugin = require(''uglify-es-webpack-plugin'')
module.exports = {
plugins: [
new UglifyEsPlugin({
compress:{
drop_console: true
}
}),
]
}
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,
},
}),