javascript - 惯用的 Kotlin2JS Gradle 设置

Question

我想用 Kotlin 编写一个 JavaScript 库，使用 Gradle 作为构建工具，同时使用 Kotlin 作为配置语言。最后，我想获得一个可以用作独立库的 JS 文件，即将 Kotlin 库(的所有必需部分)捆绑到其中。

使这项工作看起来像什么的最小设置？特别是，如何获得捆绑的 Kotlin 库？

---

这是我目前所拥有的。

https://kotlinlang.org/docs/tutorials/javascript/getting-started-gradle/getting-started-with-gradle.html
仅使用 Groovy 来配置 Gradle。它还将 buildscript 与 apply plugin 语句结合使用，我的总体印象是这被认为是一种遗留方法和 plugins 部分将是首选方式。

https://kotlinlang.org/docs/reference/using-gradle.html#targeting-javascript
有 Kotlin 脚本。 settings.gradle 的代码片段没有在 Groovy 和 Kotlin 之间切换，但它在我的 settings.gradle.kts 中似乎无需修改即可工作。这将创建一个文件 js/build/classes/kotlin/main/${project.name}.js，它看起来像这样(使用 moduleKind = "commonjs"):

(function (_, Kotlin) { … }(module.exports, require('kotlin')));

所以我可以看到它包含我的源代码的转译版本，但它不会自己运行；它将需要标准库的副本。我可以将其添加为依赖项

dependencies {
    compile("org.jetbrains.kotlin:kotlin-stdlib-js")
    testImplementation("org.jetbrains.kotlin:kotlin-test-js")
}

但是仅凭这一点还不足以使标准库最终出现在输出中。我想我也许可以使用 kotlin npm package ，但我更愿意自动将这些来源合并为一个。

我还尝试使用

禁用 noStdlib设置

tasks.withType<org.jetbrains.kotlin.gradle.dsl.KotlinJsCompile> {
    kotlinOptions {
        noStdlib = false
    }
}

其中包含相当多的猜测，因为执行此类操作的示例倾向于使用 Groovy 符号和 compileKotlin2Js block ，如果我的构建脚本是在 Kotlin 中，这会导致语法错误。所以在上面我得到一个编译器错误:

w: Unable to find kotlin-stdlib-js.jar in the Kotlin home directory.
Pass either '-no-stdlib' to prevent adding it to the classpath, or
the correct '-kotlin-home'

那么我怎样才能让它使用作为依赖项提供的标准库呢？这是正确的方法吗？

https://blog.kotlin-academy.com/kotlin-js-configuration-made-simple-ef0e361fcd4和 https://github.com/Kotlin/kotlin-frontend-plugin它的引用描述了另一种帮助 web 开发的插件，但同样所有的例子都是 Groovy 的，我什至无法得到插件来解析。我试过类似的东西

plugins {
    id("org.jetbrains.kotlin.frontend").version("0.0.45")
}

repositories {
    jcenter()
    maven {
        url = java.net.URI("https://dl.bintray.com/kotlin/kotlin-eap")
    }
}

Another blog post建议一些 Gist使用据称会从依赖项中提取 JavaScript 文件并将它们放入我的输出目录的命令。我可以想象这会奏效，但我还不愿意接受这将是解决问题的最佳方式，没有更多的流线型方式来实现这一结果。

Answer 1

可以使用 Webpack 来创建包含所有依赖项的单个 JS。

https://github.com/eggeral/kotlin-single-js-file-lib展示了一个完整的例子

1. 确保 KotlinJS 编译器用作 webpack 可以理解的模块系统。

   tasks.withType<Kotlin2JsCompile> {
       kotlinOptions {
           moduleKind = "umd"
       }
   }
   

2. 将所有依赖复制到构建目录中的某个地方

   task<Copy>("assembleJsLib") {
       configurations.compile.get().resolve().forEach { file: File ->
           from(zipTree(file.absolutePath), {
               includeEmptyDirs = false
               include { fileTreeElement ->
                   val path = fileTreeElement.path
                   (path.endsWith(".js") || path.endsWith(".js.map")) && (path.startsWith("META-INF/resources/") ||
                           !path.startsWith("META-INF/"))
               }
           })
       }
       from(tasks.withType<ProcessResources>().map { it.destinationDir })
       into("$buildDir/js")
   
       dependsOn("classes")
   }
   

3. 使用 com.moowork.node 插件运行 Webpack。

   import com.moowork.gradle.node.task.NodeTask
   
   plugins {
       id("kotlin2js") version "1.3.21"
       id("com.moowork.node") version "1.2.0"
   }
   
   node {
       download = true
   }
   
   task<NodeTask>("webpack") {
       dependsOn("npm_install")
       setScript(File("$projectDir/node_modules/webpack/bin/webpack"))
   }
   

4. 确保一切都在 gradle build

   上执行

   tasks {
       named("webpack") { dependsOn("assembleJsLib") }
       assemble { dependsOn("webpack") }
   }
   

5. 为 Npm 创建一个最小的 package.json。

   {
       "devDependencies": {
           "webpack": "^4.29.0",
           "webpack-cli": "^3.2.1"
       }
   }
   

6. 创建一个最小的 webpack.config.js

   const path = require('path');
   
   module.exports = {
       mode: 'development',
       devtool: 'source-map',
       entry: path.resolve(__dirname, 'build/classes/kotlin/main/kotlin-lib.js'),
       resolve: {
           "modules": [
               path.resolve(__dirname, 'build/js'),
               "node_modules"
           ]
       },
       output: {
           filename: "kotlin-lib.js",
           libraryTarget: "umd",
           path: path.resolve(__dirname, 'build/webpack'),
       }
   
   };