vue-wamp uglify.js compatibility?

[sarndt]

Hey,

I'm not sure if this is the right place to ask, or if it's a configuration error on my side, but when I try to compile a project with the vue-wamp plugin included, uglify.js throws me an error like this:

ERROR in js/vendor.js from UglifyJs
Unexpected token: name (key) [js/vendor.js:37511,6] 

The offending function is _key(context), using a let keyword:

function _key(context) {
  let key = _kebab(context.constructor.name) + '-' + context._uid; // Offending line in vendor.js
  if (key.substring(0, 3) === 'vm-')
    key = key.substring(3);
  return key;
}

I'm new to the whole web-ecosystem but I think the best fix for this problem is that vue-wamp is offered in ES5 format, transpiled from ES6. Is that something you'd consider doing?

Otherwise, I'd also be grateful to know how I can order the transiplation of vue-wamp from within my own project. I'm using a Webpack config with Babel loader configured like this:

  test: /\.js$/,
        loader: 'babel-loader',
        include: projectRoot,
        exclude: /node_modules/

and the following .babelrc:

{
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "stage-2"
  ],
  "plugins": [
    "transform-runtime"
  ],
  "comments": false
}

How can I just add vue-wamp to the things that need to be transpiled by babel, without adding all other modules to the transpilation phase? (I'm guessing that if I remove the exclude section from my babel loader, that it tries to transpile everything in my node_modules folder, which is not something I want.

Thanks for your help in advance, I'll gladly take any pointers to solve this myself if this kind of issue doesn't belong here.

[sarndt]

I've found the error on my side, I needed to update my webpack (and babel?) configuration to include a newer version of uglify js that is able to deal with ES6.

For anyone searching I did the following to solve my problem:

1. install npm modules

Install the babel-preset-es2016, uglifyjs-webpack-plugin and uglify-es packages via npm

2. Change babel configuration

In .babelrc (Not sure if needed): Changed my preset-configuration

From

"presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],

to

  "presets": [
    [
      "es2016"
    ],

3. In webpack.prod.conf.js (or your equivalent):

1. Add UglifyJsPlugin = require('uglifyjs-webpack-plugin'); at top of file to include the new plugin
2. Following this documentation , change uglifyjs plugin configuration to work with new plugin, e.g.

From

new webpack.optimize.UglifyJsPlugin({
      sourceMap: config.build.productionSourceMap,
      minimize: true,
      compress: {
        warnings: false,
        drop_console: true
      }
    }),

to

new UglifyJsPlugin({
      sourceMap: true,
      uglifyOptions: {
        warnings: false,
        compress: {
          drop_console: true
        }
      }
    }),

(Note that the plugin needs to be changed from new webpack.optimize.UglifyJsPlugin to new UglifyJsPlugin

Issue can be closed