前端工程化在WMS 6.0中的实践

Tech

导读

在对大型前端项目进行国际化改造时，经常会遇到过工作量大、干扰项多以及容易遗漏等问题。而针对这些大量的重复的工作，自动化工具往往能提升很大的工作效率。本文将带读者了解node cli开发的基础知识，并对如何开发一个国际化校验工具来解决这些问题展开教学。

01

背景

在今年的敏捷团队建设中，我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢？由此我的Runner探索之旅开始了！

仓储中台的愿景是，以用户为根本，通过发现、定义、设计、交付可被多BP复用的WMS能力，建设以仓储中台为主导的前中台协同研发内部共生态，帮助BP低成本地快速满足WMS相关业务诉求。wms6.0 依据此愿景进行建设，旨在提供轻量部署、灵活配置、高度产品化的仓储管理系统。

为了更好的支撑业务发展，提升用户体验，降低用户接入成本，wms6.0 各个子系统于年初开始相继进行国际化改造。web端基于vue开发，于是决定使用与之配套的『Vue I18n』作为解决方案。

02

遇到的困难

理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将目标页面展示到屏幕

前端工程国际化改造的预估工期较长，主要原因是改造面临以下问题：

1.工作量大

• 6.0前端工程包含9个子工程，其中8个工程确认必须国际化，单个子工程文件量大

• 由于前期业务的快速迭代，未考虑国际化，国际化需要从零开始，代码改造量大

2.干扰项多

• 代码中中文注释的存在，会对有效中文的检索定位造成干扰

• 有些文件包含中文但是不需要国际化，也会对中文检索造成干扰

3.容易遗漏

• 在改造完成后，传统的方案是人工检查，这很容易遗漏一些场景，导致校验不够充分

• 接手其他人的工作，代码逻辑不够熟悉

因此，通过工具来提高生产效率和校验的准确度变得尤为重要！

03

解决方案

理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将目标页面展示到屏幕。

基于以上问题，在搜索相关资料并对比多个工具的实现方法后，决定使用『node cli』作为工具的实现方案，通过AST来精准识别有效中文和i18n方法调用。

使用『node cli』作为工具的实现方案，有以下几个原因：

• 『node cli』使用 javascript 进行开发

• 对于vue和js文件的解析有很好的第三方库支持支持

• windows 和 macos 跨平台使用

• IDE（WebStorm、VS Code）无关

整体的实现思路分为以下几步：

1.通过设定好的搜索规则，找到符合要求的vue和js文件，支持忽略指定目录或文件

2.读取文件的内容，将js文件转换为JS-AST，vue文件转换为Template-AST

3.通过相应的方法对AST进行遍历，在找到符合条件的代码片段后，对改造结果进行校验，并记录校验结果

4.通过文件路径合并校验结果并输出到文件中

04

具体实现

4.1 依赖库介绍

4.1.1 glob

node的glob模块使用 *等符号, 来写一个glob规则,像在shell里一样,获取匹配对应规则的文件，本次需要使用glob的sync方法进行同步搜索。

glob.sync(pattern, [options])

• pattern {String} 待匹配的模式

• options {Object}

• return: {Array } 匹配模式的文件名

4.1.2 fs

fs包含node提供的一系列文档操作api，本次用到的是fs同步文件读取方法 readFileSync。

4.1.3 babel提供的工具库

@babel/parser是 babel 的核心工具之一，提供两种解析代码的方法：

• babelParser.parse(code, [options])：解析生成的代码含有完整的 AST 节点，包含File和Program层级。

• babelParser.parseExpression(code, [options])：解析单个 js 语句，该方法生成的 AST 不完整，所以使用@babel/traverse必须提供scope属性，限定 AST 节点遍历的范围。

@babel/traverse 提供遍历JS-AST节点的方法

@babel/types 用于判断节点类型

目前主流 JS 编译器例如 @babel/parser 定义的 AST 节点都是根据 estree/estree: The ESTree Spec (github.com) 规范来的，可以在 AST explorer 在线演示。

4.1.4 @vue/compiler-sfc

vue单文件组件(SFC)内部模板语法得到的 AST 和 JS 的AST区别很大，需要使用 @vue/compiler-sfc 来解析单文件组件，compiler-sfc 解析后的内容只需要关注 template 和 script 里的内容即可。

4.1.5 esbuild

esbuild一个JavaScript Bundler 打包和压缩工具，它可以将 JavaScript 和TypeScript代码打包分发在网页上运行，「/build/index.js」使用该工具构建。

4.2 初始化项目

4.2.1 创建项目

4.2.2 创建可执行文件

在 『wms-i18n-check』 根目录下新建一个文件『bin/index.js』

在 『package.json』 中添加配置项，然后在『/build/index.js』 实现 cli 能力

4.3 核心实现

4.3.1 整体流程

图1 vue单文件组件解析流程

js文件的解析包含在了vue文件的解析逻辑中，所以这里以vue文件的处理过程为例。

主要的流程如上图所示：

1.使用 @vue/complier-sfc 将vue SFC 转换为Template-AST

2.分别对解析结果中的 template 和 script 进行处理：

• template 是解析标签部分得到的AST，其内部节点主要分为两种类型 props 和 children。

• children内部需要处理两种类型的子节点，type为5代表节点使用了插值语法（INTERPOLATION），拿到内部代码后，按照标准js代码处理即可；type为1代表节点为元素（ELEMENT），需要继续作为 Template-AST进行递归处理。

• 遍历props，找到 type 为7（DIRECTIVE）的节点后，按照标准js代码处理即可。

• script是解析