javascript - 如何使用import()在代码拆分中导入类？

使用代码拆分后，我无法找到如何在我的React应用程序中导入类。

之前（它有效！）：

import React, {PureComponent} from 'react';
import Tus from './components/test';

 class Shopper extends PureComponent {
    constructor (props) {
    super(props); }

  uploadModal () {

/* some function code... */

   .use(Tus, {
        endpoint: 'http://192.168.22.124:3000/upload/'
    })
  /* more codes... */
 }

使用代码拆分后（不起作用）：

import React, {PureComponent} from 'react';

 class Shopper extends PureComponent {
    constructor (props) {
    super(props); }

  uploadModal () {

/* some function code... */

   .use(import('./components/test').then(Tus => Tus, {
        endpoint: 'http://192.168.22.124:3000/upload/'
    })
  /* more codes... */
 }

使用代码拆分后出现此错误


  TypeError：预期为插件类，但有对象。请确认
  该插件已导入并正确拼写。


当我console.log

import('./component/test').then(Tus => console.log(Tus))

我得到这个：

ƒ Tus(uppy, opts) {
    _classCallCheck(this, Tus);

    var _this = _possibleConstructorReturn(this, _Plugin.call(this, uppy, opts));

    _this.type = 'uploader';
    _this.id = 'Tus';
    _this.titl…

最佳答案

似乎在您的工作示例中（在代码拆分之前），您正在从''./components/test'导入默认导出。

动态import允许代码拆分后，应使用Tus.default达到相同的结果。您可以在webpack code splitting documentation上阅读有关它的更多信息。

换句话说，import('./component/test').then(Tus => Tus.default)

我希望这有帮助！干杯!

关于javascript - 如何使用import()在代码拆分中导入类？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52114890/