IntelliJ Angular 使用 Kotlin/JS 庫的項目？

Question

我有一個來自 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/下的某個深層目錄中。 所以也許我做錯了......

Answer 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 的所有信息，但它 n.netheless 工作得很好。

構建的 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 提供完整的完成語義。