无法使用webpack中的babel-loader加载Stage-3 javascript文件

Question

总览

根据Auth0文档 ，它们具有一个包含字段变量的JavaScript文件（stage-3） 。 运行我的应用程序时，出现以下错误：

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之后的第一个=符号。

诊断错误

1. 从Auth0的Github下载并运行示例项目可以成功进行。

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

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

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规则似乎没有一个可具有影响; 我只是无法使其与我的项目一起工作。

Answer 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因为否则它将尝试解析该目录中的文件。