簡體   English   中英

Webpack / Babel es2015錯誤:未捕獲的SyntaxError:意外的令牌導入

[英]Webpack/Babel es2015 error: Uncaught SyntaxError: Unexpected token import

在查看我遇到的問題的可能解決方案后,找不到解決此錯誤的方法:

Uncaught SyntaxError: Unexpected token import

我陷入了這一點,似乎無法解決它(在學習和工作時感到有些不安)。

PS我感謝您的時間和幫助。 我是一個相對新的開發者,如果我問過任何愚蠢的話,請原諒我。 謝謝

對於您的專家評審,這是我正在使用的相關文件:

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

因為我們實際上使用的是babel-loader的版本似乎並不重要。 另外.babelrc文件對我來說不是必需的。 對我temp/scripts/App.js是在我的HTML中包含捆綁的文件,該文件是在temp/scripts/App.js ,而不是在assets/scripts/App.js中包含原始源。 而已 ! 干杯

感謝@MichaelJungo

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM