angularjs NX单核苷酸：应用程序使用库的源文件，而不是dist文件夹中的源文件

bmp9r5qi 于 2023-01-20 发布在 Angular

关注(0)|答案(1)|浏览(115)

问题是这样的：我使用NX进行monorepo。有一个用angularJS（用于构建的webpack）编写的应用程序。它使用产生web组件的库（react inside）。

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"]
}

它应该使用编译后的react库文件。我尝试在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/")
    }
},

angularjs

来源：https://stackoverflow.com/questions/74878869/nx-monorepo-application-uses-librarys-source-files-instead-of-ones-from-dist-f

1条答案

按热度按时间

ruarlubt1#

在玩了一会儿之后，我找到了一个解决方案：所以我必须添加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 mainproject的时候，编译是在尖叫：

[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中添加：（在编译器选项中

"jsx": "react-jsx"

现在我可以将包含react的Web组件库导入到AngularJS项目中，IDE将提示正确的类型。

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

赞(0）回复(0）举报 2023-01-20

我来回答

angularjs NX单核苷酸：应用程序使用库的源文件，而不是dist文件夹中的源文件

1条答案

相关问题

热门标签

最新问答