使用 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 完全陌生，所以我不确定这是否是解决此问题的正确方法，但我设法通过使用以下 @987654322 使其正常工作（不幸的是仍然污染了窗口命名空间） @：

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

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

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

Answer 1

PapaParse 现在应该可以在 this commit 上使用 webpack。另见PR172。