​

引言

一项技术能得以广泛运用，其中的一个关键点在于工程化。前端从最开始的简单写写网页和样式，发展为需要处理复杂的逻辑，伴随而来的是问题是相关文件越来越多，简单在网页中引用已经解决不了问题，需要相关的工程化工具来处理和优化这个流程。前端社区也涌现了较多的解决方案，例如 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 做的更好，为数栈前端团队乃至开源社区贡献属于自己的一份力量

​