使用 webpack 动态加载 PapaParse

Question

我正在使用 PapaParse 从文件输入加载 csv 文件。

目前，我有一个工作版本，我使用脚本标签加载 PapaParse：

<script type="text/javascript" src="papaparse.js" ></script>

并处理更改事件：

Papa.parse(event.target.files[0], {
  complete: function(results) {
  ...
  }
}

我现在想使用 webpack 来捆绑我的 js，我想在需要时动态加载 PapaParse，而不是每次都加载到全局命名空间中。像这样：

require("./papaparse.js").Papa.parse(event.target.files[0], {
  complete: function(results) {
  ...
  }
}

不幸的是，这给了我 PapaParse 库中 this line 的错误 Uncaught ReferenceError: Papa is not defined：

if (!config.chunkSize)
            config.chunkSize = Papa.LocalChunkSize;

有什么方法可以实现吗？

[编辑]

我是 requirejs / webpack 的新手，所以我不确定这是否是解决这个问题的正确方法，但我设法让它工作（不幸的是仍然污染了 window 命名空间）通过使用以下 shim configuration:

require("imports?this=>window!exports?global.Papa!./papaparse.js").parse(event.target.files[0], {
  complete: function(results) {
  ...
  }
}

据我了解，第一个指令 (imports?this=>window) 使用导入加载程序将 global parameter 设置为 window 对象（而不是空对象）。这使得 PapaParse 中对 global.document 和 global.postMessage() 的调用有效（并且似乎也使对 Papa 的非限定调用有效 - 即那些没有前缀为 global.Papa 的调用）。第二个指令 (exports?global.Papa) 表示 Papa 对象作为 require 调用返回的对象导出。

如果有 webpack 经验的人可以告诉我这是否是处理此问题的正确方法，我会很感兴趣？

Answer 1

从 this commit. See also PR172 开始，PapaParse 现在应该可以与 webpack 一起使用了。

使用 webpack 动态加载 PapaParse

Loading PapaParse dynamically with webpack

javascript

webpack

papaparse