MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Kotlin JS前端开发环境搭建教程

2023-09-213.8k 阅读

一、准备工作

在开始搭建 Kotlin JS 前端开发环境之前，我们需要确保一些基础软件已经安装在我们的开发机器上。

1.1 安装 JDK（Java Development Kit）

Kotlin 是基于 JVM（Java Virtual Machine）的语言，所以 JDK 是必不可少的。

  • 下载 JDK： 你可以从 Oracle 官网（https://www.oracle.com/java/technologies/javase-downloads.html）下载适合你操作系统的 JDK 安装包。目前，Java 11 是一个较为稳定且广泛使用的版本。

  • 安装 JDK： 在下载完成后，运行安装程序。在安装过程中，按照默认提示进行操作即可，不过建议记住 JDK 的安装路径，后续配置环境变量时会用到。

  • 配置环境变量：

    • Windows： 打开“系统属性” -> “高级” -> “环境变量”。在“系统变量”中找到“Path”变量，点击“编辑”。在弹出的窗口中，点击“新建”，然后将 JDK 安装目录下的“bin”目录路径添加进去（例如：C:\Program Files\Java\jdk - 11.0.12\bin）。
    • Linux： 打开终端，编辑 .bashrc 文件（vim ~/.bashrc）。在文件末尾添加 export JAVA_HOME=/path/to/jdk（将 /path/to/jdk 替换为你实际的 JDK 安装路径），然后添加 export PATH=$JAVA_HOME/bin:$PATH。保存并退出文件后，执行 source ~/.bashrc 使配置生效。
    • macOS： 打开终端，编辑 .bash_profile 文件（vim ~/.bash_profile）。添加 export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk - 11.0.12.jdk/Contents/Home（根据你实际的 JDK 版本和路径修改），然后添加 export PATH=$JAVA_HOME/bin:$PATH。保存并退出文件后，执行 source ~/.bash_profile 使配置生效。

1.2 安装 Gradle

Gradle 是一个基于 Groovy 和 Kotlin DSL 的自动化构建工具，Kotlin JS 项目常用 Gradle 来管理依赖和构建项目。

  • 下载 Gradle： 可以从 Gradle 官网（https://gradle.org/releases/）下载适合你操作系统的 Gradle 压缩包。

  • 安装 Gradle：

    • Windows： 将下载的压缩包解压到你想要安装的目录（例如 C:\gradle）。然后打开“系统属性” -> “高级” -> “环境变量”，在“系统变量”中新建一个变量名为 GRADLE_HOME，变量值为 Gradle 的安装目录（C:\gradle）。接着编辑“Path”变量，添加 %GRADLE_HOME%\bin。
    • Linux： 解压下载的压缩包到指定目录（例如 /opt/gradle）。编辑 .bashrc 文件，添加 export GRADLE_HOME=/opt/gradle，然后添加 export PATH=$GRADLE_HOME/bin:$PATH。执行 source ~/.bashrc 使配置生效。
    • macOS： 解压压缩包到指定目录（例如 /Users/yourusername/gradle）。编辑 .bash_profile 文件，添加 export GRADLE_HOME=/Users/yourusername/gradle，然后添加 export PATH=$GRADLE_HOME/bin:$PATH。执行 source ~/.bash_profile 使配置生效。

  • 验证 Gradle 安装： 打开终端，执行 gradle -v。如果安装成功，会显示 Gradle 的版本信息。

1.3 安装 Node.js 和 npm（Node Package Manager）

由于 Kotlin JS 最终会编译为 JavaScript，而 JavaScript 在前端开发中依赖于 Node.js 生态系统，所以我们需要安装 Node.js 和 npm。

  • 下载 Node.js： 从 Node.js 官网（https://nodejs.org/en/download/）下载适合你操作系统的安装包。

  • 安装 Node.js： 运行安装程序，按照默认提示进行操作即可。安装完成后，npm 会自动随 Node.js 一起安装。

  • 验证安装： 打开终端，执行 node -v 和 npm -v，分别会显示 Node.js 和 npm 的版本信息，证明安装成功。

二、创建 Kotlin JS 项目

在完成上述准备工作后，我们可以开始创建 Kotlin JS 项目。

2.1 使用 Gradle 初始化项目

打开终端，进入你想要创建项目的目录，执行以下命令：

gradle init --type kotlin - js - library

这条命令会使用 Gradle 初始化一个 Kotlin JS 库项目。在执行过程中，Gradle 会提示你输入一些项目相关的信息，例如项目名称、组（group）等。按照提示输入相应信息即可。

初始化完成后，项目目录结构如下：

my - kotlin - js - project
├── build.gradle.kts
├── gradle
│   └── wrapper
│       ├── gradle - wrapper.jar
│       └── gradle - wrapper.properties
├── gradle.properties
├── gradlew
├── gradlew.bat
├── settings.gradle.kts
└── src
    ├── main
    │   └── kotlin
    │       └── com
    │           └── example
    │               └── mylibrary
    │                   └── MyLibrary.kt
    └── test
        └── kotlin
            └── com
                └── example
                    └── mylibrary
                        └── MyLibraryTest.kt
  • build.gradle.kts：这是 Gradle 的构建脚本，使用 Kotlin DSL 编写，用于配置项目的依赖、构建任务等。
  • gradle/wrapper：Gradle 包装器相关文件，用于确保项目使用指定版本的 Gradle 进行构建。
  • gradle.properties：可以在这里定义一些项目相关的属性，例如 Gradle 构建的一些配置参数。
  • gradlew 和 gradlew.bat：分别是 Linux 和 Windows 下的 Gradle 包装器脚本，用于在没有全局安装 Gradle 的情况下也能执行 Gradle 任务。
  • settings.gradle.kts：用于配置项目的设置，例如包含哪些子项目等。
  • src/main/kotlin：项目的主代码源目录，我们的 Kotlin 代码将放在这里。
  • src/test/kotlin：项目的测试代码源目录，用于编写单元测试等测试代码。

2.2 配置 build.gradle.kts

打开 build.gradle.kts 文件，我们可以看到如下基本配置：

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

group = "com.example"
version = "1.0 - SNAPSHOT"

repositories {
    mavenCentral()
}

dependencies {
    implementation(kotlin("stdlib - js"))
}
  • plugins：定义项目使用的插件，这里使用了 Kotlin 的 JS 插件，版本为 1.6.21，你可以根据实际情况更新到最新版本。
  • group 和 version：分别定义项目的组和版本，类似于 Maven 中的 groupId 和 version。
  • repositories：指定项目依赖的仓库，这里使用了 Maven 中央仓库。
  • dependencies：定义项目的依赖，这里添加了 Kotlin 的标准库（kotlin("stdlib - js")），这是 Kotlin JS 项目必不可少的依赖。

三、编写 Kotlin JS 代码

在 src/main/kotlin/com/example/mylibrary 目录下的 MyLibrary.kt 文件中，我们可以开始编写 Kotlin JS 代码。例如，我们编写一个简单的函数来返回问候语：

package com.example.mylibrary

fun greet(name: String): String {
    return "Hello, $name!"
}

这个函数接受一个字符串参数 name，并返回包含该名字的问候语。

四、编译 Kotlin JS 代码

在项目根目录下的终端中，执行以下 Gradle 命令来编译 Kotlin JS 代码：

./gradlew build

在 Windows 系统中，使用 gradlew.bat build。

执行完该命令后，Gradle 会下载项目所需的依赖（如果尚未下载），然后编译 Kotlin 代码为 JavaScript。编译后的 JavaScript 文件位于 build/libs 目录下，文件名格式为 项目名 - 版本号.js。

五、集成到前端项目

5.1 创建 HTML 文件

在项目根目录下创建一个 html 目录，然后在该目录下创建一个 index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta http - equiv="X - UA - Compatible" content="IE=edge">
    <meta name="viewport" content="width=device - width, initial - scale=1.0">
    <title>Kotlin JS Example</title>
</head>

<body>
    <div id="greeting"></div>
    <script src="../build/libs/my - kotlin - js - project - 1.0 - SNAPSHOT.js"></script>
    <script>
        const name = "John";
        const greeting = com_example_mylibrary.MyLibrary.greet(name);
        document.getElementById('greeting').innerHTML = greeting;
    </script>
</body>

</html>

在这个 HTML 文件中：

  • 首先引入了编译后的 Kotlin JS 生成的 JavaScript 文件（../build/libs/my - kotlin - js - project - 1.0 - SNAPSHOT.js，根据你实际的项目名和版本号调整）。
  • 然后在 JavaScript 代码中，定义了一个名字 John，调用 Kotlin 代码中的 greet 函数，并将返回的问候语显示在页面的 div 元素中。

5.2 运行 HTML 文件

你可以直接在浏览器中打开 html/index.html 文件，就能看到页面上显示出 Hello, John!，这证明 Kotlin JS 代码已经成功集成到前端项目并运行。

六、使用 Kotlin React 进行前端开发

Kotlin React 是 Kotlin 对 React 库的绑定，使得我们可以用 Kotlin 来编写 React 应用。

6.1 配置项目依赖

在 build.gradle.kts 文件中添加 Kotlin React 和 React 相关的依赖：

dependencies {
    implementation(kotlin("stdlib - js"))
    implementation("org.jetbrains.kotlin - wrappers:kotlin - react:17.0.2 - pre.141 - kotlin - 1.6.21")
    implementation("org.jetbrains.kotlin - wrappers:kotlin - react - dom:17.0.2 - pre.141 - kotlin - 1.6.21")
    implementation(npm("react", "17.0.2"))
    implementation(npm("react - dom", "17.0.2"))
}

这里添加了 Kotlin React 及其 DOM 相关的库，同时也添加了 React 和 React DOM 的 npm 依赖。

6.2 创建 Kotlin React 组件

在 src/main/kotlin/com/example/mylibrary 目录下创建一个新的文件 MyReactComponent.kt，内容如下：

package com.example.mylibrary

import react.RBuilder
import react.RComponent
import react.RProps
import react.RState
import react.dom.h1

class MyReactComponent(props: RProps) : RComponent<RProps, RState>(props) {
    override fun RBuilder.render() {
        h1 {
            +"Hello from Kotlin React!"
        }
    }
}

fun RBuilder.myReactComponent() = child(MyReactComponent::class) {}

这个 Kotlin React 组件会在页面上渲染一个 h1 标题，显示 Hello from Kotlin React!。

6.3 渲染 React 组件

在 src/main/kotlin/com/example/mylibrary 目录下的 MyLibrary.kt 文件中，修改为如下内容：

package com.example.mylibrary

import react.dom.render
import react.react
import kotlin.browser.document

fun main() {
    react {
        render(document.getElementById("root")) {
            myReactComponent()
        }
    }
}

这里通过 render 函数将 MyReactComponent 渲染到 HTML 页面中 id 为 root 的元素上。

6.4 修改 HTML 文件

在 html/index.html 文件中，修改 body 部分为：

<body>
    <div id="root"></div>
    <script src="../build/libs/my - kotlin - js - project - 1.0 - SNAPSHOT.js"></script>
</body>

这样，当我们再次编译并运行项目（通过打开 html/index.html 文件）时，就能看到页面上显示出 Hello from Kotlin React!，这表明我们已经成功使用 Kotlin React 进行前端开发。

七、使用 Webpack 进行打包

虽然 Gradle 可以编译 Kotlin JS 代码，但在实际前端开发中，Webpack 是一个更强大的打包工具，可以处理各种资源和优化。

7.1 安装 Webpack 和相关插件

在项目根目录下的终端中，执行以下命令安装 Webpack 及其相关插件：

npm install webpack webpack - cli webpack - dev - server html - webpack - plugin --save - dev
  • webpack：核心的打包工具。
  • webpack - cli：提供命令行接口来运行 Webpack。
  • webpack - dev - server：用于开发过程中的热模块替换等功能，提高开发效率。
  • html - webpack - plugin：用于自动生成 HTML 文件，并将打包后的 JavaScript 文件引入其中。

7.2 配置 Webpack

在项目根目录下创建一个 webpack.config.js 文件，内容如下：

const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');

module.exports = {
    entry: './src/main/kotlin/com/example/mylibrary/MyLibrary.kt',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.kt$/,
                use: 'kotlin - loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.kt', '.js']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './html/index.html'
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 3000
    }
};
  • entry：指定项目的入口文件，这里是 Kotlin 代码的入口。
  • output：指定打包输出的目录和文件名。
  • module.rules：定义如何处理不同类型的文件，这里使用 kotlin - loader 来处理 Kotlin 文件。
  • resolve.extensions：告诉 Webpack 在解析模块时尝试的文件扩展名。
  • plugins：使用 html - webpack - plugin 来根据指定的模板生成 HTML 文件。
  • devServer：配置开发服务器的相关参数，例如内容目录、端口等。

7.3 安装 Kotlin Loader

执行以下命令安装 kotlin - loader：

npm install kotlin - loader --save - dev

7.4 修改 Gradle 配置

在 build.gradle.kts 文件中，添加以下配置来支持 Webpack 集成：

tasks.register<Exec>("webpack") {
    workingDir = rootProject.projectDir
    commandLine = listOf("npm", "run", "webpack")
}

tasks.register<Exec>("webpackDevServer") {
    workingDir = rootProject.projectDir
    commandLine = listOf("npm", "run", "webpack - serve")
}

tasks.named("build").configure {
    dependsOn("webpack")
}

这里定义了两个 Gradle 任务 webpack 和 webpackDevServer，分别用于执行 Webpack 打包和启动 Webpack 开发服务器，并且让 build 任务依赖于 webpack 任务。

7.5 修改 package.json

在项目根目录下的 package.json 文件中，添加以下脚本：

"scripts": {
    "webpack": "webpack --config webpack.config.js",
    "webpack - serve": "webpack - dev - server --config webpack.config.js"
}

这样，我们就可以通过 npm run webpack 来执行 Webpack 打包，通过 npm run webpack - serve 来启动 Webpack 开发服务器。

八、调试 Kotlin JS 代码

8.1 在 IDE 中配置调试

以 IntelliJ IDEA 为例，打开项目后：

  • 点击 Run -> Edit Configurations。
  • 点击左上角的 + 号，选择 JavaScript Debug。
  • 在 URL 字段中输入 http://localhost:3000（如果 Webpack 开发服务器运行在其他端口，相应修改）。
  • 点击 OK 保存配置。

8.2 设置断点

在 Kotlin 代码中，例如 MyLibrary.kt 或 MyReactComponent.kt 中，在需要调试的代码行左侧点击，会出现一个红点，即设置了断点。

8.3 启动调试

点击 IntelliJ IDEA 右上角的虫子图标（调试按钮），选择刚才配置的 JavaScript Debug 配置，即可启动调试。当代码执行到断点处时，会暂停，你可以查看变量值、执行栈等信息，方便调试代码。

通过以上详细的步骤，我们完成了 Kotlin JS 前端开发环境的搭建，包括项目创建、代码编写、编译、集成到前端项目、使用 Kotlin React 以及 Webpack 打包和调试等内容。希望这能帮助你顺利开启 Kotlin JS 前端开发之旅。