Probleme beim Analysieren von asynchronen Funktionen mit Webpack

Question

Ich versuche, Webpack eine Javascript-Datei zu analysieren, die die neue Async/erwarten-Syntax verwendet, aber es gibt mir einen Analysefehler.

Hier ist meine webpack.config.js Datei:

module.exports = { 
    entry: { 
    foo: './foo.js' 
    }, 
    output: { 
    filename: 'webpack-compiled.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 
     } 
    ] 
    } 
} 

Meine package.json Datei:

{ 
    "name": "async-func-test", 
    "version": "1.0.0", 
    "description": "", 
    "main": "foo.js", 
    "scripts": { 
    "buildWithBabel": "babel foo.js --out-file babel-compiled.js", 
    "buildWithWebpack": "webpack --progress --colors" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-cli": "^6.18.0", 
    "babel-core": "^6.18.2", 
    "babel-loader": "^6.2.8", 
    "babel-plugin-syntax-async-functions": "^6.13.0", 
    "webpack": "^1.13.3" 
    } 
} 

Meine babel.rc Datei:

{ 
    "plugins": [ 
    "syntax-async-functions" 
    ] 
} 

Und die foo .js-Datei:

async function asyncFunc() { 
    return 123 
} 

asyncFunc().then(x => console.log(x)) 

Wenn ich das npm-Skript 'buildWithBabel' ausführe, läuft es fehlerfrei und erstellt die babel-compiled.js mit der richtigen Ausgabe.

Allerdings, wenn ich das npm Skript ‚buildWithWebpack‘ laufen, bekomme ich folgende Fehlermeldung:

ERROR in ./foo.js 
Module parse failed: C:\Users\Redark\Desktop\asyncFuncTest\node_modules\babel-loader\lib\index.js!C:\Users\Redark\Desktop\asyncFuncTest\foo.js Unexpected token (1:6) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (1:6) 

Ich brauche nicht die Asynchron-Funktionen zu transformieren, ist es einfach zu analysieren. Ich bin mir nicht sicher, warum es nicht für Webpack funktioniert, wie es sollte, verwenden Sie das Plugin "syntax-async-functions" in der .babelrc richtig?

Answer 1

Sie müssen auch die transform-regenerator plugin verwenden, syntax-async-functions erlaubt nur Babel, die Eingabe zu analysieren (und dann lassen Sie es in Ruhe). Webpack versteht die ES8-Syntax noch nicht, deshalb schlägt sie fehl, ohne dass sie transpiliert wurde.