無法使用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因為否則它將嘗試解析該目錄中的文件。