Webpack/Babel es2015 错误：Uncaught SyntaxError: Unexpected token import答案

【问题标题】：Webpack/Babel es2015 error: Uncaught SyntaxError: Unexpected token importWebpack/Babel es2015 错误：Uncaught SyntaxError: Unexpected token import
【发布时间】：2017-03-15 11:49:32
【问题描述】：

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

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

【问题讨论】：

你是如何运行它的？ package.json 中没有任何脚本，所以我无法确定，但您需要运行 webpack，然后运行生成的包。
我从 script.js 运行它！ @MichaelJungo
编译它并在app/temp/scripts/App.js生成包。您是在 HTML 中还是在原始源中包含该文件？
你说得对。我现在将捆绑文件包含在 temp/scripts/App.js 中，并且解决了它。正如我所看到的，我什至不需要项目中的 .babelrc 文件。太棒了，我很感谢你的帮助，非常感谢@MichaelJungo
@MichaelJungo 添加您的评论作为答案，并让 solu 将其标记为解决方案

标签： javascript webpack ecmascript-6 babeljs

【解决方案1】：

解决方案

看起来，我们实际使用哪个版本的 babel 核心 babel-loader 并不重要。我也不需要 .babelrc 文件。对我有用的是在我的 HTML 中包含在temp/scripts/App.js 生成的捆绑文件，而不是在assets/scripts/App.js 包含原始源。就是这样！干杯

感谢@MichaelJungo

【讨论】：