SyntaxError: Unexpected token: punc ())

Question

我收到了：

语法错误：意外的标记：来自 UglifyJS 的 punc ())

指向全局变量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 会抛出这种错误？

Answer 1

Uglify 不完全支持 ES6，template literals included. You can track the conversation on Github. There's a harmony branch 支持 ES6。您可以通过将 package.json 条目替换为 uglify 来使用该分支：

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

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

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

它就像一个魅力。

希望对某人有所帮助。

SyntaxError: Unexpected token: punc ())

SyntaxError: Unexpected token: punc ())

javascript

uglifyjs

reactjs

redux