引言

一项技术能得以宽泛使用，其中的一个关键点在于工程化。前端从最开始的简略写写网页和款式，倒退为须要解决简单的逻辑，随同而来的是问题是相干文件越来越多，简略在网页中援用曾经解决不了问题，须要相干的工程化工具来解决和优化这个流程。前端社区也涌现了较多的解决方案，例如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做的更好，为数栈前端团队乃至开源社区奉献属于本人的一份力量