使用 create-react-app 的多模块项目

Question

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

我有另一个项目（我们暂时称它为 Alpha），其中包含 AlphaApiService，我通过它的 props 传递给 App 组件，我在 Alpha 的 index.tsx

Alpha 使用 Create-react-app，我使用 rescript 修改 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

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

使用 create-react-app 的多模块项目

Multi module projects with create-react-app

javascript

reactjs

webpack

create-react-app