语法错误：意外的标记：括号（）后面有标点符号。

Question

我收到以下信息：

语法错误：意外的令牌：punc（）） 来自 UglifyJS

并且它指向全局变量 API_URL 的第一个字母。 我是这样实现的：

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

如果我移除键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()
})

然后一切都正常工作。有什么想法吗？为什么uglify会抛出那种错误？

- turkus

---

“url”是什么意思，您是否指的是${API_URL}？ - rckrd

@rckrd 已编辑。现在应该可以理解了。 - turkus

谢谢。如何设置 ${API_URL}？ - rckrd

Answer 1

Uglify不完全支持ES6，包括模板文字。你可以在Github上关注讨论。有一个harmony分支来支持ES6。你可以通过将package.json条目替换为以下内容来使用该分支：

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

或者，您可能希望在缩小之前先通过转译器传递代码。这样，所有语法都将是Uglify非常理解的ES5。如果您希望保留一些ES6语法，则可能需要调整转译器配置。

- Joseph

---

我使用了你的提示，将它添加到我的package.json文件中，但我认为还有其他需要做的事情，因为我正在使用https://github.com/davezuko/react-redux-starter-kit并且使用了你的建议并不起作用。也许是其他依赖关系的问题？ - turkus

Answer 2

我决定在这里写出一个解决方案。我不需要安装其他的uglify-js包版本。关键是以正确的方式解决对象导入的问题。在我的情况下，API_URL是一个全局变量。因此，Uglify 不确定它是否被定义，这就是为什么它会抛出错误的原因。

为了解决这个问题，我使用了 webpack externals 的方式：

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

它只是将JSON配置对象放入config变量中，取决于环境（development或production）。您需要做的就是将development.json和production.json放在定义webpackConfig.externals的文件旁边。

然后像我这样，在development.json中定义它：

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

然后最后在你的代码中：

... // 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()
})

它像魔法一样运作良好。

希望能对某些人有所帮助。

- turkus