NX monorepo：应用程序使用库的源文件而不是 dist 文件夹中的文件

Question

问题来了： 我将 NX 用于 monorepo。有一个用 angularJS（用于构建的 webpack）编写的应用程序。它使用生成 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

经过一番尝试后，我找到了解决方案： 所以我必须添加打字稿文件的路径，以便 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";