Problem mit babel transpiler mit WebPack

Ich versuche this Paket in meiner Anwendung zu verwenden.Problem mit babel transpiler mit WebPack

Es scheint in ES6 geschrieben zu werden, also brauche ich einen Transpiler wie babel. Ich habe ein neues Projekt gestartet und Folgendes versucht:

Erstellen Sie neue Index .html/.js-Datei zum Testen.
npm install audio-effects
npm install gulp gulp-babel babel-preset-es2015
erstellen .babelrc

Nach dem Versuch, diese aus dem dist Ordner mit python -m SimpleHTTPServer zu laufen, habe ich einen Fehler: index.js:3 Uncaught ReferenceError: require is not defined.

Nach etwas Graben, ist dies, weil require can't be used client-side. Als nächstes habe ich mit WebPack untersucht, um mir zu erlauben, require zu verwenden.

Ich ging in mein dist Ordner (wo mein transpiled Javascript ist) und lief:

webpack ./index.js index.js

jetzt aber den Fehler index.js:78 Uncaught SyntaxError: Unexpected token import Ich erhalte.

Kann jemand sehen, was ich vermisse (abgesehen von einem NPM-ES6-Gulp-WebPack Tutorial)? Ich stehe in einer Schleife von WebPacking und Transpiling fest.

index.html

<!DOCTYPE html> 
<html> 
<body> 

<h4>Welcome</h4> 

<button onclick="startAudio()">Start Audio</button> 

<script src="js/index.js"></script> 
<script type="text/javascript" src="bundle.js" charset="utf-8"></script> 

</body> 
</html>

index.js (pre-babel/WebPack - ifizierung)

import {HasAudioContext} from 'audio-effects'; 

function startAudio() { 
    console.log("Start Audio..."); 

    let audioContext = null; 
    if (HasAudioContext) { 
     console.log("Has Audio CTX"); 
     audioContext = new AudioContext(); 
    } 
    else { 
     console.log("No Audio CTX"); 
    } 
}

gulpfile.js

var gulp = require("gulp"); 
var babel = require("gulp-babel"); 

gulp.task("default", function() { 
    return gulp.src("src/app.js") 
    .pipe(babel()) 
    .pipe(gulp.dest("dist")); 
});

Quelle

2016-08-01 TomSelleck

Nun, Webpack würde einen Babel-Loader benötigen, um ES6 zu lesen. Hast du das aufgenommen? Eine andere Option, vielleicht besser, wäre die Verwendung von Gulp mit Browserify, mit der Sie auch Module im Browser benötigen. Auf diese Weise müssen Sie Webpack nicht mit einbeziehen. – tomtom

Das ist alles neu für mich, hast du eine gute Ressource, wie man schluck/browserify zusammen verwendet? Danke für die Antwort! – TomSelleck

https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=webpack%20babel%20tutorial –

ich einige Änderungen an der Bibliothek vorgenommen haben (ich bin der ursprünglicher Autor des Pakets). Wenn Sie das Paket mit npm installieren, erhalten Sie jetzt den transpilierten ES5-Code anstelle der ES6-Quelle. Sie werden trotzdem Webpack benötigen, browserifizieren, ... um das Modul zu laden.

Dies könnte den Uncaught SyntaxError: Unexpected token import Fehler beheben, also bitte aktualisieren Sie Ihre audio-effects Bibliothek auf die neueste Version.

Die falschen Importe wie in der Antwort von Jorawar Singh erwähnt sollten ebenfalls gelöst werden.

Ich arbeite immer noch an der Bibliothek, wenn Sie irgendwelche Probleme haben, fühlen Sie sich frei, ein Problem zu erstellen oder Anforderung auf Github ziehen.

Ich persönlich benutze das Paket mit Webpack. Das ist meine webpack.config.babel.js Datei (Kommentare entfernen). Hinweis: Ich benutze reagieren, wenn Sie den react Parameter nicht auf false setzen.

import config from 'madewithlove-webpack-config'; 

export default config({ 
    react: true, 
    sourcePath: 'src', // Source directory 
    outputPath: 'builds', // Transpiled coded directory 
});

Dies importiert eine grundlegende webpack config https://github.com/madewithlove/webpack-config/

Da ich Code in ES6 schreibe, ich bin es mit babel transpiling, sieht meine .babelrc-Datei wie folgt:

{ 
    "presets": ["es2015", "stage-0"], 
}

Mit diesem Setup können Sie Webpack mit webpack-dev-server --inline --hot ausführen.

Sie müssen die madewitlove webpack config nicht verwenden, aber es kümmert sich um einige Standard-Setup wie Kompilieren SCSS usw.

Ich hoffe, das gibt Ihnen einen Einblick in, wie die audio-effects Paket oder andere ES6 Paket verwenden.

Quelle

2016-08-02 10:49:27 Sambego

Nun, was ich dort verstehen einige war Probleme mit dieser Bibliothek es wurde es6 geschrieben und wenn Sie importieren und in es5 mit Webpack complie wollen, wird Webpack auch bummbel alle benötigen Module für Sie. Hier ist mein webpack.config Blick mag

var webpack = require('webpack'); 
var config = { 
    entry: './index.js', 
    output: { 
    path: __dirname + '/dist', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015'] 
     } 
    }] 
    } 
}; 

module.exports = config;

von webpack läuft die Bibliothek zusammenstellen und Ihre index.js Datei bundle.js

gab es einige andere Fragen i denke, um diese Bibliothek, die Sie brauchen um einige kleine Änderungen in der Bibliothek vorzunehmen. von

'./Helpers/HasAudioContext'; //this doesn't exist and 
               //webpack will give you compile error

'./helpers/hasAudioContext';

ich ein Problem hatte whitch i ist nicht lösen konnte ich nicht die Funktion startAudio laufen konnte den index.js aber durch konnte ich (weard mich wissen lassen, wenn Sie finden, warum) in Ihrem Index.js

document.getElementById("btn").addEventListener("click", startAudio);

es noch einige Probleme Hexe sind i und auch gibt es lösen wollen einige Probleme mit der Bibliothek Hexe müssen gelöst werden

Quelle

2016-08-01 21:16:51

Antwort

Verwandte Themen