如何使用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：期望一个插件类，但得到了对象。请验证插件是否已正确导入和拼写。

当我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…

Answer 1

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

动态import允许代码分割后，你应该使用Tus.default来实现相同的结果。你可以在webpack code splitting documentation上阅读更多相关信息。

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

我希望这有帮助！干杯!

Answer 2

你也可以使用react-loadable它为你提供加载组件后备：

function Loading() {
  return <div>Loading...</div>;
}

const Test= Loadable({
  loader: () => import('./components/test'),
  loading: Loading,
});

在你的路线：

 <Route exact path="/" component={Test} />

你应该安装：在你的package.json：

"@babel/plugin-syntax-dynamic-import": "7.0.0-beta.54",

在.babelrc

"plugins": [
"@babel/plugin-syntax-dynamic-import",]

它很棒。