将 FilePond 与动态导入和代码拆分结合使用

Question

我想加载 FilePond 核心，包括需要的插件，只有当它们真正在页面上使用时。我想使用 Webpack Dynamic Imports.

示例：https://codesandbox.io/s/filepond-lazy-load-example-josspz

这样做我得到以下错误：

Uncaught (in promise) TypeError: plugin is not a function

相关代码：

Promise.all([
  import(
    /* webpackChunkName: 'FilePondPluginFileValidateSize' */ "filepond-plugin-file-validate-size"
  ),
  import(
    /* webpackChunkName: 'FilePondPluginFileValidateType' */ "filepond-plugin-file-validate-type"
  ),
  import(
    /* webpackChunkName: 'FilePondPluginFileEncode' */ "filepond-plugin-file-encode"
  ),
  import(/* webpackChunkName: 'FilePond' */ "filepond")
]).then(
  ([
    FilePondPluginFileValidateSize,
    FilePondPluginFileValidateType,
    FilePondPluginFileEncode,
    FilePond
  ]) => {
    FilePond.registerPlugin(
      FilePondPluginFileValidateSize,
      FilePondPluginFileValidateType,
      FilePondPluginFileEncode
    );

    // Create a FilePond instance
    FilePond.create(input, {});
  }
);

此行导致的错误： https://codesandbox.io/s/filepond-lazy-load-example-josspz?file=/src/components/file-upload.js:959-992

不确定是插件问题还是我忽略了什么。

更新：上面 link 中提供的固定且有效的解决方案。

Answer 1

您需要访问 default 属性，因为插件使用默认导出。

在这些情况下，最好的做法是 console.log 变量以查看其中的内容。

工作版本：https://codesandbox.io/s/filepond-lazy-load-example-forked-gvxrom?file=/src/components/file-upload.js

将 FilePond 与动态导入和代码拆分结合使用

Use FilePond with Dynamic Import and Code Splitting

webpack

es6-promise

filepond