无法使用webpack中的babel-loader加载第3阶段的javascript文件 [英] Unable to load stage-3 javascript file using babel-loader from webpack

问题描述

根据 Auth0文档，他们有一个JavaScript文件，该文件具有字段变量(阶段3).运行我的应用程序时，出现以下错误:

Following the Auth0 documentation, they have a JavaScript file that has field variables (stage-3). When running my app, I get the following error:

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

Above, the unexpected token is the first = sign after authenticated.

1. 从 Auth0的Github 成功运行.

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

1. Downloading and running the sample project from Auth0's Github works successfully.

2. Running the following command using babel-cli parses the file successfully:

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

仅当我运行应用程序时，才会引发错误，因此我怀疑webpack配置中有些混乱.

It is only when I run the application that the error is thrown, so I suspect there's something fishy in the webpack config.

我的配置

以下是我的.babelrc配置:

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

我只包含了webpack配置的相关部分，但是可以在需要时提供完整文件:

I've only included the relevant parts of my webpack config, but can provide the full file if necessary:

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依赖版本:

Dependencies Info

The following are the babel/webpack dependency versions in my project:

"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很好地处理文件.花了很多时间研究了这个问题，尝试使用.babelrc在webpack配置中使用了不同的选项，并强制使用了stage-2而不是stage-3来使webpack不使用它，我觉得我已经尝试了一切.

With All That Said

How can I further figure out what is causing the error to be thrown? It's pretty specific, but it's clear that babel can process the file just fine using the babel-cli. After spending many hours researching this issue, trying different options in the webpack config, using .babelrc and forcing webpack to not use it, using stage-2 instead of stage-3, I feel like I've tried everything.

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

My configuration isn't much different than the one in Auth0's sample project. Copying and pasting their .babelrc file into mine as well as their js webpack rules didn't seem to have an effect either; I just can't get it to work with my project.

推荐答案

我发现大多数遇到webpack问题的人(排除了加载程序问题后)都遇到了问题，因为您的webpack配置中存在一些错误的设置

I've found that most people that have had webpack problems (after ruling out the loader issue) have the issue because there is something incorrect setup in your webpack config.

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

For my webpack config, I needed to change this:

  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文件

Because my webpack.config.js file existed under src, so the issue might've been that the .. argument in my include property wasn't pointing to the right folder to look for .js files in.

我需要排除node_modules，因为否则它将尝试解析该目录中的文件.

I needed to exclude node_modules because it would otherwise try to parse files in that directory.

这篇关于无法使用webpack中的babel-loader加载第3阶段的javascript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！