我在获取axios的数据时出现了这个问题

小能豆

我在获取axios的数据时出现了这个问题

javascript

正在执行任务: npm run dev

my-project@1.0.0 dev
webpack-dev-server –inline –progress –config build/webpack.dev.conf.js

(node:8311) [DEP0111] DeprecationWarning: Access to process.binding(‘http_parser’) is deprecated.
(Use node --trace-deprecation ... to show where the warning was created)
13% building modules 27/68 modules 41 active …Users/zhuyishu/my-project/src/App.vue{ parser: “babylon” } is deprecated; we now treat it as { parser: “babel” }.
94% asset optimization

ERROR Failed to compile with 2 errors 01:09:43

error in ./node_modules/axios/lib/platform/index.js

Module parse failed: Unexpected token (5:2)
You may need an appropriate loader to handle this file type.
|
| export default {
| …utils,
| …platform
| }

@ ./node_modules/axios/lib/defaults/index.js 8:0-44
@ ./node_modules/axios/lib/axios.js
@ ./node_modules/axios/index.js
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/tlias/EmpView.vue
@ ./src/views/tlias/EmpView.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:7070 webpack/hot/dev-server ./src/main.js

error in ./node_modules/axios/lib/core/mergeConfig.js

Module parse failed: Unexpected token (6:69)
You may need an appropriate loader to handle this file type.
| import AxiosHeaders from “./AxiosHeaders.js”;
|
| const headersToObject = (thing) => thing instanceof AxiosHeaders ? { …thing } : thing;
|
| /**

@ ./node_modules/axios/lib/axios.js 6:0-48
@ ./node_modules/axios/index.js
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/tlias/EmpView.vue
@ ./src/views/tlias/EmpView.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:7070 webpack/hot/dev-server ./src/main.js

阅读 136

2024-06-11

共1个答案

小能豆

你遇到的错误是由于 Webpack 无法解析某些代码中的现代 JavaScript 语法（如扩展运算符 ...）。这通常是因为缺少合适的 loader 来处理这些代码。具体来说，可能是 babel-loader 没有正确配置来处理 node_modules 目录中的代码。

以下是解决这个问题的几个步骤：

1. 确保 Babel 和相关 Loader 已正确安装

首先，确保你已经安装了必要的依赖项：

npm install --save-dev babel-loader @babel/core @babel/preset-env

2. 配置 Babel

确保你的项目根目录中有一个 .babelrc 或 babel.config.js 文件，包含以下内容：

`.babelrc`

{
  "presets": ["@babel/preset-env"]
}

`babel.config.js`

module.exports = {
  presets: ["@babel/preset-env"]
};

3. 配置 Webpack

修改 webpack.dev.conf.js 来确保 babel-loader 处理 node_modules 目录中的代码。通常，babel-loader 会排除 node_modules，但对于某些模块（如 axios），你需要显式地包括它们。

在 webpack.dev.conf.js 中找到 module 配置部分，并修改 rules：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules\/(?!(axios)\/).*/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    },
    // 其他规则
  ]
}

4. 清理缓存并重启开发服务器

有时候，Webpack 可能会缓存旧的配置。你可以尝试清理缓存并重新启动开发服务器：

rm -rf node_modules/.cache
npm run dev

示例完整的 `webpack.dev.conf.js`

以下是一个修改后的示例 webpack.dev.conf.js：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!(axios)\/).*/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      // 其他规则
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true,
    open: true,
    historyApiFallback: true,
    port: 7070
  }
};

通过这些步骤，你应该可以解决 Module parse failed 的问题，并使你的 Webpack 配置正确处理现代 JavaScript 语法。

2024-06-11