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

<强>解决方案

看起来我们实际上使用的是babel-loader的哪个版本并不重要。另外.babelrc文件对我来说不是必需的。对我有用的是在temp/scripts/App.js生成的HTML中包含捆绑文件，而不是在assets/scripts/App.js包含原始来源。而已！欢呼声

感谢@MichaelJungo

Webpack / Babel es2015错误：未捕获的SyntaxError：意外的令牌导入

1 个答案: