babel-loader - es6读取出错，如何配置一些啥文件以正确读取呢？

Question

今天项目下载了一个json2csv的模块，但是引入的时候模块解析失败，查了一下是要配置webpack的loader模块，但是试了半天也没配出来，请问这个地方应该怎样配置一下才可以吗？ 用的是node14

配置了一下webpack，但是也不太确定有什么用

module.exports = {  // ...其他配置  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: 'babel-loader',          options: {            presets: ['@babel/preset-env']          }        }      }    ]  }};

Answer 1

首先，你需要确保你已经在项目中安装了 json2csv 模块，可以使用 npm 或 yarn 进行安装：

npm install json2csv

或者

yarn add json2csv

然后，如果你在使用 webpack，你需要安装一些 loader 来处理 json 和 csv 文件。可以使用 json-loader 和 csv-loader。安装命令如下：

npm install --save-dev json-loader csv-loader

或者

yarn add --dev json-loader csv-loader

然后在你的 webpack 配置文件中添加对应的 loader：

module.exports = {  // ...其他配置  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: 'babel-loader',          options: {            presets: ['@babel/preset-env']          }        }      },      {        test: /\.json$/, // 添加这一行来处理 json 文件        use: 'json-loader' // 使用 json-loader 来处理 json 文件      },      {        test: /\.csv$/, // 添加这一行来处理 csv 文件        use: 'csv-loader' // 使用 csv-loader 来处理 csv 文件      }    ]  }};

这样，当你在代码中引入 json 或 csv 文件时，webpack 就会自动使用相应的 loader 来处理这些文件。例如，你可以像下面这样引入一个 json 文件：

import data from './data.json'; // webpack 会自动使用 json-loader 来处理这个文件，并将结果赋值给 data 变量