带有 Kotlin/JS 库的 IntelliJ Angular 项目？答案

【问题标题】：IntelliJ Angular Project with Kotlin/JS Library?带有 Kotlin/JS 库的 IntelliJ Angular 项目？
【发布时间】：2023-01-26 12:28:33
【问题描述】：

我有一个来自 Android 开发的 Java 代码库，我想在相同的网络应用程序版本中重用它。库代码非常通用，因为它始终旨在可重用，并且在过去曾用于生成 Android/Java、App-Engine/Java、iOS/ObjC 和 GWT 应用程序。

环顾四周，我认为 Web 应用程序的最佳框架是 Angular。将库代码重写为 Kotlin 应该是一项相对较小的任务，因为有工具可以完成大部分工作。然后可以为 JVM（用于本机和后端应用程序）或 JavaScript（用于 Web 应用程序）编译它。

虽然支持/反对该计划的建议是受欢迎的，但我的实际问题是......

如何设置 IntelliJ 项目来执行此操作？

我认为显而易见的答案是两个模块：一个用于库，一个用于应用程序，但 IntelliJ 不允许创建 Kotlin 模块，只能创建一个 Kotlin 项目。

相反，我创建了一个 Kotlin/JS 项目，并使用 Angular/CLI 在其下方创建了应用程序模块（将来某个时候将在其旁边放置一个后端应用程序）。库构建并运行示例应用程序，但我无法让后者包含前者生成的 JS（加上 .d.ts）代码，该代码位于 build/ 下的某个深层目录中。所以也许我做错了......

【问题讨论】：

让生成的.d.ts 文件工作对我来说一直是个问题。我让它工作的方法是将本地路径依赖项添加到您的package.json (docs.npmjs.com/cli/v7/configuring-npm/package-json#local-paths)。然后，查看您的node_modules 文件夹以确保它包含在内。最后，将node_modules/directory/**/*.js和node_modules/directory/**/*.d.ts添加到您的tsconfig.json。要导入类型，您需要导入 com（或 org 或 net，具体取决于您的组）命名空间，然后通过限定名称访问类型。
我的王国Makefile!!!似乎顶层目录中的 Kotlin 代码只为 JS 构建了一次，我不知道为什么。即使删除生成的构建输出并选择“重建项目”也不会恢复它。也许我可以将这一切作为一个模块来完成，并在其他项目出现时只对公共/共享源目录进行符号链接？
我使用了类似的东西——我有 2 个子目录用于我的 kotlin 和 js 模块，并通过 build.gradle.kts 文件将它们注册为一个项目。您可以使用 node-gradle-plugin 将 npx 任务映射到 gradle 任务，然后在您的 kotlin 项目上使用任务依赖项以确保一切按顺序构建。如果需要，您甚至可以在此处添加自定义复制任务。

标签： javascript java angular kotlin intellij-idea

【解决方案1】：

哇，那太粗糙了！经过数小时的谷歌搜索和尝试失败后，这里有一些有用的东西。也许我会在未来找到更清洁的方法，但目前这是可以接受的。

注意：我在我喜欢的 gradle 插件上浪费了太多时间。如果它们不是第一方的，它们往往是无人维护的、缺乏文档记录的（主要是假设读者已经知道它们在做什么）并且已经过时了。以下内容仅通过第一方支持程序完成。

使用 Angular/CLI 创建一个顶级项目，然后是应用程序和库的子项目：

ng new MyGeneralProject --no-create-application
ng generate library klib
ng generate application MyApp

现在在顶级目录中设置 Gradle（或等待并通过 IDE 执行此操作）：

gradle init
gradle wrapper

在 IntelliJ 中打开顶层。创建/编辑顶级build.gradle.kts 文件：

buildscript {}
plugins {}
repositories {}

更重要的是顶层settings.gradle.kts文件：

rootProject.name = "MyProject"
include("projects:klib")

现在将访问projects/klib/gradle.build.kts 文件：

plugins {
    kotlin("js") version "1.8.0"
}

repositories {
    mavenCentral()
    //jcenter()
}

dependencies {
    //testImplementation(kotlin("test")) // The Kotlin test library
}

kotlin {
    sourceSets {
        all {
            // allow @JsExport without opt-in each time
            languageSettings.optIn("kotlin.js.ExperimentalJsExport")
        }
        val main by getting {
            kotlin.srcDir("src")
        }
    }

    js(IR) {
        moduleName = "klib"
        browser {
            distribution {
                directory = File("$projectDir/../../dist/$moduleName")
            }
        }
        binaries.library()
    }
}

以上使用 Gradle 的 kotlin("js") 插件，但它是由 JetBrains 作为 IntelliJ 的一部分提供的，它还维护 Kotlin 语言库。尽管它的文档还假设您已经了解 Gradle 的所有内容，但它仍然可以正常工作。

构建的 JS/TS 库将在顶级目录下创建为“dist/klib”。此命名可能需要一些改进，但它是一个合理的起点。

在顶级tsconfig.json 文件中，在“compilerOptions”下，查找“paths”并根据需要进行更新。我使用前导“@”来指示顶级导入位置：

{
  ...
  "compilerOptions": {
    ...
    "paths": {
      "@klib": [
        "dist/klib"
      ]
    }
    ...
  },
  ...
}

在projects/myapp/src/app/whatever.ts 文件中，访问转换后的 Kotlin 库：

import * as klib from '@klib'

然后整个库可以作为 klib.blah.blah.blah 获得，IntelliJ 提供完整的完成语义。

【讨论】：