Un pequeño proyecto que comencé hace uso de 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 algunos otros proyectos anteriores sin este problema (es decir, sin ese módulo de nodo en particular).
'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 todas las const a var en ese módulo instalado por npm, y todo está bien. Así que no entiendo el fracaso.
¿Qué tiene de malo la 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?
He reemplazado temporalmente (o permanentemente) UglifyJS con Butternut y parece que funciona.
Como mencionó ChrisR , UglifyJS no es compatible con ES6 en absoluto.
Debe usar terser-webpack-plugin para ES6 (webpack@5 usará este complemento para mejorar)
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, }, }),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 usa no transpila sus archivos a es5 para usarlos en cualquier lugar.
Si desea seguir usando 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 .
Tuve el mismo problema y el complemento gulp gulp-uglify-es resolvió el problema.
Creo que es la decisión más sencilla.
Solo instala:
npm i gulp-uglify-es --save-devdespués de eso en tu código cambia solo esta línea
const uglify = require('gulp-uglify');a esto:
const uglify = require('gulp-uglify-es').default;La propiedad NB .default es crucial; de lo contrario, tendrá un error que indica que uglify no es una función.
Como se mencionó anteriormente y como parte del operador const de ES6, solo puede ser procesado por el complemento de gulp de es6 más moderno "gulp-uglify-es"
El resto de su código no necesita ser cambiado.
¡Saludos!