のWebPACK /バベルのes2015エラー：キャッチされないでSyntaxError：予期しないトークン輸入

Question

私が持っていた問題の可能な解決策を見た後、このエラーを解決する方法を見つけることができませんでした：

Uncaught SyntaxError: Unexpected token import 

イムは、この時点で立ち往生それを解決するようなことはありません（勉強しようとすると少し不穏に感じます）。

P.S.私はあなたの時間と助けに感謝します。私は何か愚かなことを尋ねた場合私は比較的新しい開発者、私を許してください。あなたの専門家レビューをありがとう

は、ここでの作業イム関連ファイルです：

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

Answer 1

Solution

本当に私たちが実際に使用バベルコアのバージョン、バベル・ローダーは問題doesntのようだと。また、.babelrcファイルは私にとっては必要ありませんでした。私のために働いたのは、元のソースをassets/scripts/App.jsに含めるのではなく、temp/scripts/App.jsで生成されたバンドルされたファイルを自分のHTMLに含めることでした。それでおしまい ！歓声

@MichaelJungoに感謝