непредвиденная ошибка при компиляции моего кода с помощью Webpack

Question

[! [Введите описание изображения здесь] [1]] [1] Я пытаюсь настроить свой проект вокруг Webpack и Babel. В моем package.json у меня есть скрипт Webpack для компиляции, но я получаю эту ошибку, которая не имеет смысла для меня. Я попытался прогуглить ошибку, но она настолько расплывчатая, я застрял.

package.json

{
  "name": "fatfreefood",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "webpack": "webpack --mode=production",
    "start": "http-server"
  },
  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: { main: './src/index.js' },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.boundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    }
}

Ошибка консоли:

    ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected character '​' (3:62)

      1 | import Food from './app/food.js';
      2 |
    > 3 | const chicken_breast = new Food('Chicken Breast', 26, 0, 3.5);​
        |                                                               ^
      4 |
      5 | ​
      6 |

food.js

    "use strict";
// Food is a base class​
export default class Food {​
   constructor (name, protein, carbs, fat) {​
       this.name = name;​
       this.protein = protein;​
       this.carbs = carbs;​
       this.fat = fat;​
   }​

   toString () {​
       return `${this.name} | ${this.protein}g P :: ${this.carbs}g C :: ${this.fat}g F`​
   }​

   print () {​
     console.log( this.toString() );​
   }​
}​

index.js

    import Food from './app/food.js';

const chicken_breast = new Food('Chicken Breast', 26, 0, 3.5);​

​

chicken_breast.print(); // 'Chicken Breast | 26g P :: 0g C :: 3.5g F'​

​

console.log(chicken_breast.protein); // 26 (LINE A)

Ошибка не имеет смысла для меня, так как я не видел неожиданных символов. я могу только подозревать, что что-то может быть не так с моим webpack.config или пакетом / скриптами

Answer 1

Возможно, вам не хватает предустановки. (см .: https://www.npmjs.com/package/babel-preset-es2015#via-babelrc-recommended)

создайте файл с именем .babelrc и добавьте

{
  "presets": ["es2015"]
}

Возможно, вы также захотите перейти на обновление до 7+ (см .: https://babeljs.io/docs/en/env/)

Answer 2

Вы должны доверять вашему журналу ошибок, я скопировал и вставил вашу строку в свою консоль, чтобы увидеть, что не так, и я продолжал видеть этот странный символ, когда вставлял строку, из которой он выдает ошибку.

Было немного сложно сделать снимок экрана, когда я завис над красной точкой, но если вы выполняете то же упражнение в консоли Chrome, то там есть символ юникода, который, по-видимому, невидим вне консоли (строка будет отображаться там). тоже) по той строчке только из того что ты вставил. В позиции 62, строка 3. После точки с запятой.

Редактировать: я видел ваше обновление, и хотя я описал то, что вызывает ошибку, я обнаружил, что этот ответ также может быть полезен для понимания того, почему эти символы могут появляться в ваших настройках - я не буду диагностировать то, что вы могли бы делать, но кажется, что вы хотите решить, что символы появляются, ответ, который я связываю, кажется хорошим местом для начала, если вы потерялись. Соответствующий стекопоток? ---> (пробел нулевой ширины) в моем коде JS. Откуда они взялись?