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

Question

使用代码拆分后，我找不到如何在我的 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: Expected a plugin class, but got object. Please verify that the plugin was imported and spelled correctly.

当我控制台时

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…

Answer 1

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

动态导入以允许代码拆分后，您应该使用Tus.default 来获得相同的结果。您可以在 webpack code splitting documentation 上阅读更多相关信息.

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

希望对您有所帮助!干杯!