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

Question

概览

继Auth0 documentation, they have a JavaScript file that has field variables (stage-3)之后。当运行ning 我的应用程序时，出现以下错误：

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 规则复制并粘贴到我的文件中似乎也没有效果；我只是无法让它与我的项目一起工作。

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 属性中的 .. 参数不是t 指向正确的文件夹以在其中查找 .js 个文件。

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

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

Unable to load stage-3 javascript file using babel-loader from webpack

javascript

webpack

babeljs

babel-loader

概览

诊断错误

我的配置

依赖信息

话虽如此