语法错误:意外标记:punc ())

IT技术 javascript reactjs redux uglifyjs
2021-05-22 21:50:26

我收到:

SyntaxError: Unexpected token: punc ()) from 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()
})

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

然后一切正常。有任何想法吗?为什么 uglify 会抛出这种错误?

2个回答

Uglify 不完全支持 ES6,包括模板文字您可以在 Github 上跟踪对话有一个支持 ES6harmony分支您可以通过将package.jsonuglify条目替换为以下内容来使用分支

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

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

我决定在这里写一个解决方案。我不必安装其他uglify-js软件包版本。关键是要以适当的方式解决对对象的导入。就我而言,这API_URL是一个全局变量。因此 Uglify 不确定它是否已定义,这就是它抛出错误的原因。

为了解决这个问题,我以这种方式使用了webpack externals

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

它只是将 JSON 配置对象放入config变量中,具体取决于环境(developmentproduction)。您需要做的就是将development.jsonproduction.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()
})

它就像一个魅力。

希望对某人有所帮助。