Webpack/Babel es2015 error: Uncaught Syntaxerror: unerwarteter Token Import

nach für die Ausgabe an den möglichen Lösungen sucht ich hatte, konnte nicht einen Weg finden, um diesen Fehler zu beheben:Webpack/Babel es2015 error: Uncaught Syntaxerror: unerwarteter Token Import

Uncaught SyntaxError: Unexpected token import

Im an dieser Stelle stecken und scheint es nicht zu lösen (fühle mich ein wenig unruhig, wenn ich versuche zu lernen und zu arbeiten).

P.S. Ich schätze deine Zeit und Hilfe. Ich bin relativ ein neuer Entwickler, verzeihen Sie mir, wenn ich etwas dummes gefragt habe. Dank

Für Ihre Experten-Review, hier die entsprechenden Dateien, die mit Im Arbeits:

package.json

{ 
    "name": "", 
    "version": "1.0.0", 
    "dependencies": { 
    "browser-sync": "^2.18.6", 
    "browsersync": "0.0.1-security", 
    "jquery": "^3.1.1", 
    "jquery-smooth-scroll": "^2.1.2", 
    "lazysizes": "^3.0.0-rc3", 
    "normalize.css": "^5.0.0", 
    "picturefill": "^3.0.2", 
    "waypoints": "^4.0.1" 
}, 
    "devDependencies": { 
    "autoprefixer": "^6.7.0", 
    "babel-core": "^6.22.1", 
    "babel-loader": "^6.2.10", 
    "babel-preset-es2015": "^6.22.0", 
    "del": "^2.2.2", 
    "gulp": "^3.9.1", 
    "gulp-cssnano": "^2.1.2", 
    "gulp-imagemin": "^3.1.1", 
    "gulp-modernizr": "^1.0.0-alpha", 
    "gulp-postcss": "^6.3.0", 
    "gulp-rename": "^1.2.2", 
    "gulp-rev": "^7.1.2", 
    "gulp-svg-sprite": "^1.3.1", 
    "gulp-svg2png": "^0.3.0", 
    "gulp-uglify": "^2.0.1", 
    "gulp-watch": "^4.3.11", 
    "postcss-hexrgba": "^0.2.1", 
    "postcss-import": "^9.1.0", 
    "postcss-mixins": "^5.4.1", 
    "postcss-nested": "^1.0.0", 
    "postcss-simple-vars": "^3.0.0", 
    "webpack": "^2.2.1" 
    } 
}

webpack.config.js

module.exports = { 
    entry: { 
    app: "./app/assets/scripts/App.js" 
    }, 
    output: { 
    path: "./app/temp/scripts", 
    filename: "App.js" 
    }, 
    module: { 
    loaders: [ 
     { 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015'] 
     }, 
     test: /\.js$/, 
     exclude: /node_modules/ 
     } 
    ] 
    } 
}

App.js

import MobileMenu from './modules/MobileMenu'; 


var mobileMenu = new MobileMenu();

MobileMenu.js

class MobileMenu { 
    constructor() { 
    alert("testing 123") 
    } 
} 

export default MobileMenu;

scripts.js

var gulp = require('gulp'), 
webpack = require('webpack'); 

gulp.task('scripts', ['modernizr'], function(callback) { 
    webpack(require('../../webpack.config.js'), function(err, stats) { 
    if (err) { 
     console.log(err.toString()); 
    } 
    console.log(stats.toString()); 
    callback(); 
    }); 
});

Quelle

2017-03-15 Sam

Wie laufen Sie es? Sie haben keine Skripte in 'package.json', also kann ich es nicht wirklich sagen, aber Sie müssen das webpack ausführen und dann das generierte Paket ausführen. –

Ich laufe es von script.js! @MichaelJungo – Sam

Das kompiliert es und generiert das Bündel unter 'app/temp/scripts/App.js'. Nehmen Sie diese Datei in Ihren HTML-Code oder in die ursprüngliche Quelle auf? –

Solution

Wie es scheint, dass es wirklich wichtig, welche Version des babel Kern, babel-loader tut wir tatsächlich nutzen. Auch .babelrc Datei wurde nicht für mich benötigt. Was für mich funktionierte, war, die gebündelte Datei in meinen HTML-Code einzufügen, der unter temp/scripts/App.js generiert wurde, anstatt die ursprüngliche Quelle unter assets/scripts/App.js einzubeziehen. Das ist es ! Prost

Dank @MichaelJungo

Quelle

2017-03-15 15:35:07 Sam

Webpack/Babel es2015 error: Uncaught Syntaxerror: unerwarteter Token Import

Antwort

Verwandte Themen