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",]

效果很好。

如何使用import（）在代码拆分中导入类？

2 个答案: