NX monorepo：應用程序使用庫的源文件而不是 dist 文件夾中的源文件

Question

問題是：我將 NX 用於 monorepo。 angularJS寫了一個應用（webpack for building）。 它使用生成 web 個組件的庫（內部反應）。

import { test } from "@lib/somelib"

該庫成功生成 /dist 文件夾（包含 index.js、react 和 ts 類型）。

問題是，當我構建主應用程序時，出現錯誤：

[tsl] ERROR in /Users/***/monorepo/packages/somelib/src/web-components/FirstWebComponent.tsx(33,5)
      TS17004: Cannot use JSX unless the '--jsx' flag is provided.
 @ ../somelib/src/web-components/index.ts 4:28-58
 @ ../somelib/src/index.ts 6:21-48
 @ ./app/scripts/app.ts 90:18-50

它不應該使用 /dist/packages/somelib/ 中的文件嗎？ 而不是嘗試使用來源中的原始內容？

這是我的 tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
       "@lib/somelib": ["packages/somelib/src/index.ts"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

它應該采用已編譯的反應庫文件。 我嘗試更改 tsconfig.base.json 中的路徑但沒有成功：

"paths": {
  "@lib/somelib": ["dist/packages/somelib"]
}

我還嘗試在應用程序的 webpack 配置中添加別名，

resolve: {
    plugins: [new TsconfigPathsPlugin()],
    extensions: ['.tsx', '.ts', '.js', '.css', '.html'],
    alias: {
      "@lib/somelib": path.resolve(__dirname, "../../dist/packages/somelib/")
    }
},

Answer 1

玩了一會兒后，我找到了一個解決方案：所以我必須將路徑添加到 typescript 文件，以便 IDE 可以識別類型（在文件 tsconfig.base.json 中:)

    "paths": {
      "@lib/ui-components": ["packages/ui-components/src/index.js"]
    }

然后在 webpack.config.js 中：

   resolve: {
      extensions: ['.ts', '.js', '.css', '.html'],
      alias: {
        '@lib/ui-components': path.resolve(__dirname, '../../packages/ui-components/dist/index'),
      },
   }

但隨后在編譯 AngularJS 主項目時，編譯尖叫：

[tsl] ERROR in /Users/myname/repo/AngularJS/app-monorepo/packages/ui-components/src/web-components/index.ts(1,33)
      TS6142: Module './FirstWebComponent' was resolved to '/Users/myname/repo/AngularJS/app-monorepo/packages/ui-components/src/web-components/FirstWebComponent.tsx', but '--jsx' is not set.

所以我不得不在 AngualrJS tsconfig.json 中添加：（在 compilerOptions

    "jsx": "react-jsx"

現在我可以將包含 react 的 web 組件庫導入到 AngularJS 項目中，IDE 將提示正確的類型。

import { SomeComponent } from "@lib/ui-components";