Question

[！[在此处输入图片描述] [1]] [1]我正在尝试使用Webpack和Babel在我的项目周围设置混乱。在我的package.json中，我有一个Webpack脚本可以编译，但是得到这个错误对我来说没有任何意义。我试图通过Google搜索该错误，但它的含糊之处完全被卡住了。

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或package / scripts可能有问题

Answer 1

您应该信任您的错误日志，我将您的字符串复制并粘贴到控制台中以查看出了什么问题，并且在粘贴引发错误的行时一直看到这个奇怪的字符。

当我将鼠标悬停在红点上时，截取屏幕截图有些困难，但是如果您在chrome控制台中进行相同的练习，则会有一个unicode字符，\ u200b显然在控制台之外是不可见的（行会丢到那里也只能从您粘贴的内容开始。在位置62的第3行。在分号之后。

编辑：我看到了您的更新，虽然我所描述的是引发错误的原因，但我发现此答案也可能有助于理解为什么这些字符可能会出现在您的设置中-我无法诊断您可以做什么在那里做，但是似乎您想解决的是\ u200b字符正在显示，如果您迷路了，我链接的答案似乎是一个很好的起点。相关的stackoverflow？ ---> \u200b (Zero width space) characters in my JS code. Where did they come from?

Answer 2

您可能缺少预设。（请参阅：https://www.npmjs.com/package/babel-preset-es2015#via-babelrc-recommended）

创建一个名为.babelrc的文件并添加

{
  "presets": ["es2015"]
}

您可能还希望考虑升级到babel 7+（请参阅：https://babeljs.io/docs/en/env/）

使用Webpack编译代码时引发意外错误

2 个答案: