带有create-react-app的多模块项目

Question

我有一个名为Frontend-Core-Components的项目，其中包含我的App组件。

我有另一个项目（现在叫它Alpha），其中包含AlphaApiService，我通过其道具将其传递给App组件，我在Alpha的index.tsx中做到了< / p>

Alpha使用Create-react-app，我使用脚本来修改Webpack配置，以将Frontend-core-components作为模块添加，在此Webpack配置中，我使用resolve.alias进行映射从Alpha index.tsx导入到Frontend-Core-Components。

这一切似乎都奏效，除了当我从Alpha项目运行构建时，遇到了以下问题。

  SyntaxError: /Users/coolguy/project/alpha/src/index.tsx: Unexpected token (9:11)

   7 |
   8 | window.onload = () => {
>  9 |     render(<App apiService={new AlphaApiService()} />, 
document.getElementById('root'))
         |                    ^
      10 | }
      11 |

有什么想法吗？

Answer 1

在导入之前，您需要编译导入模块。

我建议您检查该项目以创建React组件库。

https://github.com/KaiHotz/react-rollup-boilerplate

Answer 2

或者您可以在Frontend-Core-Components（或ts-loader）规则中include babel-loader。