关于javascript:ko在数栈中的应用

引言

一项技术能得以宽泛使用，其中的一个关键点在于工程化。前端从最开始的简略写写网页和款式，倒退为须要解决简单的逻辑，随同而来的是问题是相干文件越来越多，简略在网页中援用曾经解决不了问题，须要相干的工程化工具来解决和优化这个流程。前端社区也涌现了较多的解决方案，例如 rollup，parcel，webpack，esbuild 等，在不同状况下都能较好的解决问题。这其中 webpack 因其微内核架构，在外围性能稳固且优良的施展状况下，开发者能够灵便的管制各个流程，使得其周边生态趋于多样和较为欠缺，逐步成为各解决方案中的首选。

然而正是基于其微内核架构的灵活性，以及生态的多样性，使得其复杂度直线回升。缺乏经验的工程师往往对其配置等不太理解，节约了较多工夫解决配置问题，影响开发效率；同时如何更好的优化打包效率，也须要肯定的积攒。数栈前端团队基于 webpack 封装了 ko，并在数栈指标治理，业务核心，音讯管理中心等产品线陆续实际和优化，最终使得配置等问题更为简化，同时打包效率相比于之前有 2 倍以上的晋升，较为完满的解决了如上问题。

整体架构

ko 的整体架构如下所示:

​

整体上是一个 monorepo, 借助 lerna 与 yarn workspace 不便对包进行治理，其中:

• babel-preset-ko-app 是针对于 ko 的 babel preset, 供 babel-loader 应用
• ko-config 集成了 eslint,prettier,stylelint 等 lint 相干的配置和依赖，供 ko-lints 应用
• ko-lints 集成了 eslint,prettier,stylelint 等 lint 相干的工具
• ko 作为整个工具的入口，集成了 ko-lints，并整合了 dev 与 build 相干外围性能

在数栈中的利用

从整体架构上来说，目前 ko 集成了打包和格式化相干的性能，那么 ko 在数栈中是如何利用的呢？咱们以数栈产品业务核心的整个研发流程来举例。

develop

首先是开发流程，ko dev 相干的可配置项如下所示:

• -p, –port <port>: 配置端口号
• –host <host>: 配置 host
• -t, –ts: typescript 反对
• -a,–analyzer: 应用 webpack-bundle-analyzer 进行打包后果剖析

另外与之相干的是 ko 的配置文件 ko.config.js，咱们只须要在配置文件中增加如下内容:

module.exports = {entry: ['./src/app.tsx'],
  devServer: {
    proxy,
    host: '127.0.0.1',
    port: 8082,
  },
};

指定开发阶段的几个必要配置，并执行 ko dev - t 命令，就能够在 http://127.0.0.1:8082 看到程序失常运行

code review

在整个数栈的研发体系中，code review 这个环节会先借助 eslint 来对代码写法等进行检测，检测通过之后再进行后续的 review 步骤，借助工具进行代码检测这个性能也被集成进了 ko。

ko eslint 相干的可配置项如下所示:

• -f, –fix: 开启主动修复
• -c, –config <path>: eslint 自定义配置门路
• –ignore-path <ignorePath>: eslint 须要疏忽的文件配置门路，默认为.koignore

咱们只须要执行 ko eslint 或者 ko es 就能够对代码格局等进行检测。ko 默认集成了比拟正当的 eslint 配置项，同时也能够应用 -c, –config <path> 配置项来自定义配置项。

与 ko eslint 相似的还有 ko prettier 和 ko stylelint, 别离是借助 prettier 和 stylelint 来对相干代码进行检测和格式化，应用形式和 ko eslint 基本相同

build

开发和 code review 完结并通过测试之后，咱们能够将以后的版本内容公布到线上环境了，这时候就须要应用 ko build 将以后版本内容进行打包。

ko build 相干的可配置项如下所示:

• –hash: 打包文件名增加 hash
• -t,–ts,–typescript: typescript 反对
• -e,–esbuild: esbuild 反对，目前只应用了 esbuild 压缩相干性能

执行 ko build - t 命令，期待一小段时间后，打包后果会输入到当前目录的 dist 文件夹下

至此，整个研发流程完结，能够看到 ko 在数栈的整个研发流程中有着较高的参与度，波及到了 develop,code review 与 build 三个重要的阶段。

效率晋升

在保障整个研发流程稳固的状况下，ko 在版本迭代的同时也对打包流程进行了优化，优化后果如下所示:

能够看到目前 5.x 版本的 ko 相比于 4.x 版本的 ko 在首次打包和二次打包的速度上有较为显著的晋升 

将来方向

前端目前还处于高速倒退的阶段，社区中也涌现了如 Vite,Rome 等新的解决方案，ko 在迭代的过程中也会一直的尝试新的技术使用与新的方向。在 2022 年，ko 会尝试着针对以下几点内容进行发力，争取效率的晋升与易用性的晋升：

• 依靠于 webpack 5 新增的 module federation，尝试打包速度的晋升与微前端的实际
• 更多的尝试 esbuild 相干性能，晋升打包效率
• 制订更加细节的 eslint 等规定，服务于数栈各个产品线乃至社区

期待 2022 年 ko 做的更好，为数栈前端团队乃至开源社区奉献属于本人的一份力量