概述

Question

概述

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

 $('#jackSerachBox').on('keyup', function (e) {
     var input, filter, ul, li, a, i;

     // filter = input.val().toUpperCase();
     li = $('#jacksTab li');
     li.each(function (e) {
         a = $('a', $(e)).eq(0);
         console.log(a.html())
         //test.html(a.html())
     })
 })

以上，意外令牌是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(); |之后的第一个=符号。

诊断错误

从Auth0's Github下载并运行示例项目成功。
使用authenticated运行以下命令成功解析文件：
```
babel-cli
```
只有当我运行应用程序时才会抛出错误，所以我怀疑webpack配置中有一些可疑的内容。

我的配置

以下是我的$ node node_modules\babel-cli\bin\babel.js src\auth\AuthService.js --presets stage-3配置：

.babelrc

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

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

依赖关系信息

以下是我项目中的babel / 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-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而不是stage-2使用stage-3并强制webpack不使用webpack配置中的不同选项，我觉得我已经尝试了一切。

我的配置与Auth0示例项目中的配置差别不大。将他们的.babelrc文件复制并粘贴到我的js webpack规则中似乎也没有效果;我无法让它与我的项目合作。

Answer 1

我发现大多数有网络包问题的人（在排除加载程序问题之后）都有问题，因为你的webpack配置中存在不正确的设置。

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

len(array[*integer*])

到此：

  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，否则会尝试解析该目录中的文件。

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

概述

诊断错误

我的配置

依赖关系信息

全力以赴

1 个答案: