React可加载，用于两个repos/create-react-app

Question

我正在尝试使用由create-react-app制作的两个repos /两个不同的应用程序的react-loadable

我使用npm link连接两个应用程序，并在父应用程序中使用以下代码使用子应用程序

//parent application

import Loadable from 'react-loadable';

export default Loadable({
  loader: () => import("child-app/src"),
  loading() {
    return <div>Loading...</div>
  }
})

我已经使子组件可导出，代码是，

//child application

import React from 'react';

function App() {
  return (
    <div>Child App</div>
  );
}

export default App;

我一直在错误下面

SyntaxError: /Users/ssinha/Documents/microfrontend2/first-app/src/App.js: Unexpected token (5:4)

  3 | function App() {
  4 |   return (
> 5 |     <div>Child App</div>
    |     ^
  6 |   );
  7 | }

看起来它没有被转换，我试着使用一些插件，比如"@loadable/babel- plugin“，没有帮助。：-(

Answer 1

首先，我建议您在调试过程中降低复杂性，因此在修复问题之前尽量不要使用react-loadable。我不认为react-loadable是这里的问题。

create-react-app不会转译你的node_modules文件夹中的代码(我认为这是你不能改变的，它是设计成这样的，至少我上次使用它时是这样的)。

所以:如果你想继续使用一个npm链接的模块，你必须在使用它之前构建模块(恼人的部分是你应该在子模块上的avery change重新构建它)。

您不应该导入child-app/src (因为它是源代码，而不是转译的)，而应该简单地导入“子应用程序”。

最后:迁移到monorepo或使用yarn工作区可能会简化您的生活。