Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
111
rated 0 times [  115] [ 4]  / answers: 1 / hits: 67459  / 7 Years ago, wed, november 22, 2017, 12:00:00

A small project I started make use a node module (installed via npm) that declares const variables. Running and testing this project is well, but browserify fails when UglifyJS is executed.




Unexpected token: keyword (const)




Here is a generic Gulp file that I have successfully been using for a few other past projects without this issue (i.e. without that particular node module).



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


I have tried fixing this by replace all const to var in that npm-installed module, and everything is fine. So I do not understand the failure.



What's wrong with const? Unless someone uses IE10, all major browsers support this syntax.



Is there a way to fix this without requiring a change to that node module?



Update



I have temporarily (or permanently) replaced UglifyJS with Butternut and seem to work.


More From » npm

 Answers
4

As ChrisR mentionned, UglifyJS does not support ES6 at all.



You need to use terser-webpack-plugin for ES6 (webpack@5 will use this plugin for uglification)



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


Then define in your plugins array



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

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


Source


[#55865] Sunday, November 19, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
dallasb

Total Points: 657
Total Questions: 98
Total Answers: 97

Location: Luxembourg
Member since Tue, Jan 25, 2022
2 Years ago
;