帶有 create-react-app 的多模塊項目

Question

我有一個名為Frontend-Core-Components的項目，其中包含我的 App 組件。

我有另一個包含AlphaApiService的項目（我們暫時稱它為Alpha ），我通過它的道具將它傳遞給 App 組件，我在 Alpha 的index.tsx中執行此操作

Alpha uses Create-react-app, I'm using rescript to modify the Webpack config to add Frontend-core-components as a module, Inside this Webpack configuration, I use resolve.alias to map imports from Alpha index.tsx to the 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

或者，您可以在ts-loader （或babel-loader ）規則中包含Frontend-Core-Components 。