语法错误：意外的令牌：PUNC（））

Question

我recieving：

语法错误：意外的令牌：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会抛出这种错误？

Answer 1

我决定在这里写一个解决方案。我不必安装其他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() 
}) 

，它就像一个魅力。

希望能帮助别人。

Answer 2

Uglify不完全支持ES6，template literals included。你可以track the conversation on Github。有一个支持ES6的harmony branch。您可以通过替换您的package.json项中的分支进行丑化到：

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

或者，你可能想通过transpiler微小之前先通过代码。这样，所有的语法都将成为Uglify非常了解的ES5。如果您希望某些ES6语法保持不变，您可能需要调整转换器配置。