如何使用 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... */ 
}

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

类型错误：需要一个插件类，但得到了对象。请验证 插件已导入并拼写正确。

当我安慰时.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 代码拆分文档中阅读更多相关信息。

换句话说，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",]

效果很好。