Syntaxerror: Unexpected token: punc())

Question

Ich recieving:

Syntaxerror: Unexpected token: punc()) von UglifyJS

und es verweist auf den ersten Buchstaben des globalen Variablen API_URL. Ich habe es auf diese Weise umgesetzt:

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

Wenn ich entferne globalen Variable unter Schlüssel 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() 
}) 

dann fein alles funktioniert. Irgendwelche Ideen? Warum ugify wirft diese Art von Fehler?

Answer 1

Ich entschied mich, hier eine Lösung zu schreiben. Ich musste keine anderen uglify-js Paketversionen installieren. Der Punkt war, die Importe auf Objekte richtig zu lösen. In meinem Fall war die API_URL eine globale Variable. Also war Uglify nicht sicher, ob es definiert ist, deshalb hat es einen Fehler geworfen.

Um dieses Problem, das ich webpack externals auf diese Weise verwendet zu lösen:

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

Es setzt nur Objekt JSON-Konfiguration in die config variabel, abhängig von der Umgebung (development oder production). Alles, was Sie tun müssen, ist development.json und production.json neben der Datei, wo Sie webpackConfig.externals definieren.

dann wie in meinem Fall, definieren Sie, dass es in development.json sagen lassen:

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

dann schließlich in Ihrem 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() 
}) 

und es wirkt wie ein Zauber.

Hoffe, dass jemand hilft.

Answer 2

Uglify unterstützt ES6 nicht vollständig, template literals included. Sie können track the conversation on Github. Es gibt eine harmony branch für ES6-Unterstützung. Sie können den Zweig verwenden, indem Sie Ihre package.json Eintrag ersetzt für verunstalten zu:

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

Alternativ Sie den Code durch eine Transpiler bevor minification passieren möchten. Auf diese Weise wird die gesamte Syntax ES5 sein, die Uglify sehr gut versteht. Vielleicht möchten Sie Ihre Transpiler-Konfiguration optimieren, wenn Sie möchten, dass einige der ES6-Syntax intakt bleiben.