javascript - Webpack/Babel es2015错误:未捕获语法错误:意外的 token 导入

Question

在查看了我遇到的问题的可能解决方案之后，找不到解决此错误的方法:

Uncaught SyntaxError: Unexpected token import

我停留在这一点上，似乎无法解决(尝试学习和工作时有些不安)。

附言感谢您的宝贵时间和帮助。我是一个相对较新的开发人员，请问我有什么愚蠢的想法。谢谢

为了让您的专家审阅，以下是与我一起使用的相关文件:

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

看来，实际上使用的是哪个版本的babel核心，babel-loader并不重要。我也不需要.babelrc文件。对我有用的是将 bundle 文件包含在由 temp/scripts/App.js生成的HTML中，而不是将原始源包括在 assets/scripts/App.js中。而已 !干杯

感谢@MichaelJungo