javascript - 警告 - 动态加载 csv 时的严重依赖关系

Question

我正在尝试使用 webpack 在用户单击时加载 .csv 数据集。这是在点击回调中完成的，即使是使用 Vue 配置的，所以我有这样的东西:

onClick : function(clickData){
  var path = '../data/' + clickData.path;
  var onLoad = function(loadedCsv){
     console.log(loadedCsv);
  };
  import(path).then(onLoad);
}

当我使用 webpack 编译此文件时，出现错误“68:4-16 关键依赖项:依赖项的请求是一个表达式”。此外，数据集无法加载。

我还发现了以下内容:

• 无论我使用“import”还是“require”语法，我都会收到相同的警告/问题
• 如果我将 .csv 添加到最初的“require”语句中作为静态路径(即“../data/myCsv.csv”)，我可以导入我的 .csv，并且它可以使用我设置的加载器正常导入.

我的目标是仅导入我想要的数据集。我使用描述所有数据的 JSON 填充 Vue 组件，因此我需要将数据集作为变量传递到我的 import 语句中，而不是对路径进行硬编码。我怎样才能做到这一点？

Answer 1

删除局部变量 path 并将导入语句更改为 import('../data/' + file + '.csv')。这样，webpack 将能够解析上下文并创建一个上下文模块，其中包含 csv 文件到模块 ID 的映射。