如何超越Android并在前端使用Kotlin
by Adam Arold
亚当·阿罗德(Adam Arold)
如何超越Android并在前端使用Kotlin (How to go beyond Android and use Kotlin on the frontend)
This article is part of a series. Check out the previous part here.
Though most developers use Kotlin on Android, it is also a viable option on other platforms. In this article, we’ll look at how it works in the browser. We’ll walk through an example which is rather minimal, but it comes with batteries included: testing, minimization, and deployment.
尽管大多数开发人员在Android上使用Kotlin，但在其他平台上也是可行的选择。 在本文中，我们将研究它在浏览器中的工作方式。 我们将通过一个示例进行介绍，该示例相当少，但是它附带了一些电池：测试，最小化和部署。
While the kotlin2js plugin has been around for quite some time, it was not considered production ready because the JavaScript code it generated was measured in megabytes. It was also hard to set up testing and external JavaScript dependencies. How this changed lately? Enter Kotlin Multiplatform Projects.
尽管kotlin2js插件已经存在了一段时间，但由于它生成JavaScript代码以兆字节为单位，因此尚未被认为可以投入生产。 设置测试和外部JavaScript依赖关系也很困难。 最近情况如何变化？ 输入Kotlin多平台项目 。
With the advent of this new feature, now it is possible to share code between multiple components in your program. Using the JavaScript compiler has also become much easier. I’ll talk about Multiplatform Projects in another article, so now let’s focus on getting it to work in the browser.
随着这项新功能的出现 ，现在可以在程序中的多个组件之间共享代码。 使用JavaScript编译器也变得更加容易。 我将在另一篇文章中讨论多平台项目 ，因此现在让我们集中讨论如何使其在浏览器中工作。
项目设置 (Project Setup)
The source code for this article can be found in this repository. It is a simplified version of the code found here.
可以在此存储库中找到本文的源代码。 它是此处找到的代码的简化版本。
We’ll be using Gradle for building the project. There are other build tools out there, but Gradle has the best support for Kotlin.
我们将使用Gradle构建项目。 还有其他构建工具，但Gradle对Kotlin的支持最佳。
When creating a Kotlin project which compiles to JavaScript, you can stick to the same project structure which you have already gotten used to: src/main/kotlin for Kotlin files and src/test/kotlin for test files.
创建可编译为JavaScript的Kotlin项目时，您可以坚持使用与以前相同的项目结构： src/main/kotlin用于Kotlin文件)和src/test/kotlin用于测试文件)。
Our build.gradle , however, will need some extra configuration.
但是，我们的build.gradle将需要一些额外的配置。
First, in the buildscript next to the usual kotlin-gradle-plugin , we’ll also need the gradle-node-plugin:
首先，在buildscript旁边通常kotlin-gradle-plugin ，我们还需要gradle-node-plugin ：
This is a necessity, because we’ll delegate a lot of work to JavaScript libraries like Karma and Webpack.
这是必需的，因为我们会将很多工作委托给JavaScript库(例如Karma和Webpack) 。
Note: for those of you who want to completely get rid of JavaScript, I have bad news: currently it is very hard to completely do away with it. We are either stuck with some JS tools, or we have to completely rewrite everything in Kotlin, including tooling.
注意：对于那些想完全摆脱JavaScript的人来说，我有个坏消息：目前很难完全消除它。 我们要么停留在某些JS工具上，要么必须完全重写Kotlin中的所有内容，包括工具。
Next, instead of applying the kotlin plugin, we’ll use the kotlin-platform-js along with kotlin-dce-js and com.moowork.node:
接下来，代替应用kotlin插件，我们将使用kotlin-platform-js以及kotlin-dce-js和com.moowork.node ：
kotlin-platform-js is used in multiplatform Kotlin projects, but it also works for standalone JS code like in our example. kotlin-dce-js is responsible for dead code elimination which will help us create very small JS files. com.moowork.node is for interfacing with node.js.
kotlin-platform-js用于多平台Kotlin项目，但它也适用于独立的JS代码，例如我们的示例。 kotlin-dce-js负责消除 kotlin-dce-js 代码 ，这将有助于我们创建非常小的JS文件。 com.moowork.node用于与node.js接口。
With all the plugins in place, we’ll need some dependencies:
在所有插件就绪后，我们需要一些依赖项：
kotlin-stdlib-js as its name suggests contains the Kotlin stdlib for JavaScript projects. kotlin-test-js is for testing our code.
kotlin-stdlib-js包含用于JavaScript项目的Kotlin stdlib。 kotlin-test-js用于测试我们的代码。
The rest of the configuration is to wire together the kotlin2js compiler with the JavaScript world:
其余的配置是将kotlin2js编译器与JavaScript世界连接在一起：
快速JavaScript工具速成课程 (A quick JavaScript tooling crash course)
We’re done with Gradle, but we still need to set up Karma and Webpack, and a package.json is also necessary. “Why are these necessary?” you might ask. The answer is that if we don’t want to rewrite everything in Kotlin, which is not part of our business domain (like testing tools, package management and such), we’ll need to use those which are present within the JavaScript ecosystem.
我们已经完成了Gradle，但是我们仍然需要设置Karma和Webpack，并且package.json也是必需的。 “为什么这些必要？” 你可能会问。 答案是，如果我们不想重写不属于我们业务领域的Kotlin中的所有内容(例如测试工具，包管理等)，则需要使用JavaScript生态系统中存在的内容。
Fortunately the plugins we applied above help out with these.
幸运的是，我们上面应用的插件可以帮助您解决这些问题。
Note that discussing these tools in depth is out of the scope of this article. There are links below so you can read their documentation.
请注意，深入讨论这些工具不在本文讨论范围之内。 以下是链接，因此您可以阅读其文档。
业力 (Karma)
Karma is a test runner tool for JavaScript. You can think of it as something like JUnit in the Java world.
Karma是JavaScript的测试运行器工具。 您可以将其视为Java世界中的类似JUnit的东西。
It will pick up the karma.conf.js automatically when we test our project:
测试项目时， karma.conf.js自动选择karma.conf.js ：
This config will work from our source and test folders, and will use a Chrome headless browser to run our tests.
此配置将在我们的源文件夹和测试文件夹中运行，并将使用Chrome无头浏览器来运行我们的测试。
Webpack (Webpack)
Webpack is a module bundler tool which can be used to create JavaScript artifacts. It works in a similar way like Shade works in Maven and Shadow in Gradle. This is not entirely accurate, but this will do for now just to understand why we need it.
Webpack是一个模块捆绑器工具，可用于创建JavaScript工件。 它的工作方式类似于Maven中的Shade和Gradle中的Shadow。 这并非完全准确，但这只是为了了解我们为什么需要它，现在这样做。
We’ll need two files. One for development:
我们需要两个文件。 一种发展：
and another one for bundling our project:
另一个用于捆绑我们的项目：
package.json (The package.json)
The package.json file is essentially a way to manage locally installed npm packages (npm itself is a JavaScript build tool, like Maven or Gradle).
package.json文件本质上是管理本地安装的npm软件包的一种方法( npm本身是JavaScript构建工具，例如Maven或Gradle)。
The example project uses yarn which is an upgrade over npm. But yarn uses the npm package repository in the background.
示例项目使用的是yarn ，它是npm的升级。 但是yarn在后台使用npm软件包存储库。
In our project, we’ll need a very simple setup with only some wiring for development and testing tools:
在我们的项目中，我们将需要一个非常简单的设置，仅需一些布线即可用于开发和测试工具：
我们到了吗？ (Are we there yet?)
Yep, we’ve pretty much wired together all the tools and plugins. I have to note here that there are many ways to set up Kotlin frontend projects, like using the kotlin-frontend-plugin or using the gradle-js-plugin.
是的，我们几乎将所有工具和插件连接在一起。 我必须在这里指出，有很多方法可以设置Kotlin前端项目，例如使用kotlin-frontend-plugin或使用gradle-js-plugin 。
The reason why I chose this setup is that this way we can exploit all the functionality these tools give us like:
之所以选择此设置，是因为我们可以利用这些工具为我们提供的所有功能，例如：
- hot code replace 热门代码替换
- browser sync 浏览器同步
- using JavaScript libraries from npm 使用npm中JavaScript库
- creating bundles with Webpack 使用Webpack创建捆绑
Unit and functional testing, including async tests
单元和功能测试，包括异步测试
让我们写一些代码 (Let’s write some code)
Now that we have set up the project, we can finally start writing some code! Let’s create a Main.kt with a main function in our source folder:
现在我们已经建立了项目，我们终于可以开始编写一些代码了！ 让我们在源文件夹中创建一个具有main函数的Main.kt ：
Now, if we build the project with ./gradlew assemble , we’ll find an index.html in the build/dist folder. Let’s open it and check the developer console:
现在，如果我们使用./gradlew assemble构建项目， ./gradlew assemble在build/dist文件夹中找到index.html 。 让我们打开它并检查开发者控制台：
Congratulations! You have successfully compiled your first Kotlin project to JavaScript!
恭喜你！ 您已成功将第一个Kotlin项目编译为JavaScript！
测试中 (Testing)
This is all well and good, but you won’t get far without the means to write proper unit tests. Luckily Kotlin provides us with a testing library with which we can write Kotlin tests. It will be run with Karma under the hood.
这一切都很好，但是，如果没有编写适当的单元测试的手段，您将走得很远。 幸运的是Kotlin为我们提供了一个测试库，我们可以使用该库编写Kotlin测试。 它将与Karma一起运行。
Let’s add something to test:
让我们添加一些测试：
Then add a test for it:
然后为其添加测试：
Now if we run ./gradlew test we’ll be presented with a nice output for our test:
现在，如果我们运行./gradlew test我们将看到一个不错的测试输出：
While this covers unit testing, we’re still not out of the woods yet. We also need to test our program in its native environment: the browser.
尽管这涵盖了单元测试，但我们仍未走出困境。 我们还需要在其本机环境中测试程序：浏览器。
Note that, technically, the unit tests also work in the browser. But they do not touch functionality provided by it like the window object in the following example.
请注意，从技术上讲，单元测试也可以在浏览器中使用。 但是它们不像下面的示例中的window对象那样触摸它提供的功能。
Fortunately we can use the DOM, and we also have the option to write asynchronous tests:
幸运的是，我们可以使用DOM，并且我们还可以选择编写异步测试：
Now we have everything at our disposal to start working on real applications which will run in the browser!
现在，我们已经掌握了一切准备工作，可以开始在浏览器中运行的实际应用程序中工作！
结论 (Conclusion)
While this article is far from exhaustive, we’ve touched on a lot of important points. I think that Kotlin development in the browser is definitely doable, and since the 1.2 version of Kotlin frontend development, it is also production ready!
尽管本文还不详尽，但我们已经谈到了许多重要的观点。 我认为在浏览器中进行Kotlin开发绝对是可行的，并且自从1.2版本的Kotlin前端开发以来，它还可以投入生产！
We have learned that deploying Kotlin code to the browser is not hard, and it only comes with a fixed amount of boilerplate which we only have to set up once.
我们了解到，将Kotlin代码部署到浏览器并不难，并且只附带固定数量的样板，我们只需设置一次即可。
If you are interested, there are a lot of other examples including the kotlin-frontend-plugin with extra webpack config or a Kotlin Full-stack example.
如果您有兴趣，还有很多其他示例，包括带有额外webpack配置的kotlin-frontend-plugin或Kotlin Full-stack示例 。
I’d also recommend checking out the Kotlin blog and the official JetBrains repo.
我还建议您查看Kotlin博客和JetBrains官方仓库 。
The code for this example lives in this repository. Feel free to download it and fiddle around with it.
此示例的代码位于此存储库中。 随时下载并随意处理。
So go forth and Kode on!
因此， 继续前进 ，让Kode 继续前进 ！
Keep tuned! The next article in this series will be about multiplatform development, with a full stack example!
继续关注！ 本系列的下一篇文章将是关于多平台开发的完整示例。
Thanks for reading! You can read more of my articles on my blog .
谢谢阅读！ 您可以在我的博客上阅读更多我的文章。
翻译自: https://www.freecodecamp.org/news/going-beyond-android-kotlin-on-the-frontend-d82e9f4f3155/