javascript - 使用 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) {
  ...
  }
}

不幸的是，这给了我错误 Uncaught ReferenceError: Papa is not defined from the this line in the PapaParse library:

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

有什么方法可以实现吗？

[编辑]

我是 requirejs/webpack 的新手，所以我不确定这是否是解决此问题的正确方法，但我设法通过使用以下 shim configuration 使其正常工作(不幸的是仍然污染了窗口 namespace ):

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

从 this commit 开始，PapaParse 应该可以与 webpack 一起使用了.另见 PR172 .