SyntaxError：意外的标记：punc（））

Question

I'm recieving:

SyntaxError: Unexpected token: punc ()) from UglifyJS

and it points to the first letter of global variable API_URL . I have it implemented in this way:

export default reduxApi({
  campaigns: {
    url: `${API_URL}/api/v1/whatever`,
    transformer (response) {
      if (!response) return {}
      return response.data
    }
  } 
}).use('fetch', adapterFetch(fetch)).use('options', {
  headers: getRequestHeaders()
})

If I remove global variable under key url :

export default reduxApi({
  campaigns: {
    url: `/api/v1/whatever`,
    transformer (response) {
      if (!response) return {}
      return response.data
    }
  } 
}).use('fetch', adapterFetch(fetch)).use('options', {
  headers: getRequestHeaders()
})

then everything works fine. Any ideas? Why uglify throws that kind of error?

Answer 1

Uglify doesn't fully support ES6, template literals included . You can track the conversation on Github . There's a harmony branch for ES6 support. You can use the branch by replacing your package.json entry for uglify to:

"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony"

Alternatively, you might want to pass the code through a transpiler first before minification. That way, all the syntax will be ES5 which Uglify understands very well. You might want to tweak your transpiler config if you want some of the ES6 syntax to remain intact.

Answer 2

I decided to write here a solution. I didn't have to install other uglify-js package versions. The point was to solve imports to objects in proper way. In my case the API_URL was a global variable. So Uglify wasn't sure if it's defined, that's why it threw an error.

To solve that problem I used webpack externals in this way:

// ------------------------------------                                                                                               
// Externals
// ------------------------------------
webpackConfig.externals = {
  config: JSON.stringify(require(`./${__DEV__ ? 'development' : 'production'}.json`)),                                                
}

It just puts JSON configuration object into the config variable, depending on environment ( development or production ). All you need to do is to put development.json and production.json next to file where you define webpackConfig.externals .

Then as in my case, you define it let's say in development.json :

{
  "apiUrl": "http://localhost:5000"
}

then finally in your code:

... // other imports
import config from "config"

export default reduxApi({
  campaigns: {
    url: `${config.apiUrl}/api/v1/whatever`,
    transformer (response) {
      if (!response) return {}
      return response.data
    }
  } 
}).use('fetch', adapterFetch(fetch)).use('options', {
  headers: getRequestHeaders()
})

and it works like a charm.

Hope that helps somebody.