【问题标题】：Unable to load stage-3 javascript file using babel-loader from webpack无法使用来自 webpack 的 babel-loader 加载 stage-3 javascript 文件
【发布时间】：2018-04-09 07:56:45
【问题描述】：

概述

在Auth0 documentation 之后，他们有一个包含field variables (stage-3) 的JavaScript 文件。运行我的应用程序时，我收到以下错误：

ERROR in ./src/auth/AuthService.js
Module parse failed: Unexpected token (7:16)
You may need an appropriate loader to handle this file type.
| 
| export default class AuthService {
|   authenticated = this.isAuthenticated();
|   authNotifier = new EventEmitter();
|

上面，意外的标记是authenticated 之后的第一个= 符号。

诊断错误

从Auth0's Github 下载并运行示例项目成功。

使用babel-cli运行以下命令成功解析文件：

$ node node_modules\babel-cli\bin\babel.js src\auth\AuthService.js --presets stage-3

只有在我运行应用程序时才会抛出错误，所以我怀疑 webpack 配置中有问题。

我的配置

以下是我的.babelrc 配置：

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ],
  "plugins": ["transform-runtime"]
}

我只包含了我的 webpack 配置的相关部分，但如果需要，可以提供完整的文件：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      // ...
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.join(__dirname, '..', 'src')],
      },
      // ...
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json'],

  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

// ...

依赖信息

以下是我项目中的babel/webpack依赖版本：

"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"webpack": "^3.6.0",

说了这么多

如何进一步找出导致错误发生的原因？它非常具体，但很明显babel 可以使用babel-cli 很好地处理文件。在花了很多时间研究这个问题之后，在 webpack 配置中尝试了不同的选项，使用 .babelrc 并强制 webpack 不使用它，使用 stage-2 而不是 stage-3，我觉得我已经尝试了一切。

我的配置与 Auth0 的示例项目中的配置没有太大区别。将他们的 .babelrc 文件复制并粘贴到我的文件中以及他们的 js webpack 规则似乎也没有效果；我只是无法让它与我的项目一起使用。

【问题讨论】：

在 babel 6 中，babel-plugin-transform-class-properties 确实只包含在 stage-2 预设中，而不是在 stage-3 上。您正在 Auth0 的示例项目中运行诊断的第 2 步，而不是您的项目，对吗？我对此的唯一解释是它以某种方式忽略了预设标志，仍然使用他们的 .babelrc 中的stage-2。
@Elian Ibaj 抱歉，我的意思是我正在我的项目中运行诊断的第 2 步。我原本以为transform-class-properties 包含在stage-3 中，但即使在我的.babelrc 中将其更改为stage-2 并使用--presets 标志运行babel-cli，它仍然会产生相同的输出而没有错误.使用stage-2 运行我的应用程序仍然会产生相同的错误。

标签： javascript webpack babeljs babel-loader

【解决方案1】：

我发现大多数遇到 webpack 问题的人（在排除加载程序问题后）都会遇到问题，因为您的 webpack 配置中有一些不正确的设置。

对于我的 webpack 配置，我需要更改：

  module: {
    rules: [
      // ...
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.join(__dirname, '..', 'src')],
      },
      // ...
    ]
  },

到这里：

  module: {
    rules: [
      // ...
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      // ...
    ]
  },

因为我的webpack.config.js 文件存在于src 下，所以问题可能是我的include 属性中的.. 参数没有指向要在其中查找.js 文件的正确文件夹.

我需要排除 node_modules，否则它会尝试解析该目录中的文件。

【讨论】：