前端自动化自动导出脚本，从此解放你的双手

大家好。我是 Euwei，是一名小小的前端CodeMan，今天的这篇文章主要是介绍如何实现一个自动导出函数的脚本。

一段代码重复在不同的地方里使用，我们可以将它封装为一个函数，那如果是一段重复的操作呢？重复的操作该如何封装呢？重复的操作可以封装为一个自动化脚本。

为什么需要自动化

提高效率：自动化减少了重复和繁琐的手动任务。通过将这些任务交给脚本执行，可以节省大量时间和精力，使人们能够将更多时间专注于其他重要的任务和项目。
减少错误：人为错误是不可避免的，特别是在执行重复性任务时。自动化可以减少这些错误的风险，因为计算机程序可以以一致的方式执行任务，不受疲劳、注意力不集中等因素的影响。
提高一致性：自动化确保任务以一致的方式执行，遵循预定义的规则和流程。这有助于确保结果的一致性和质量，并减少因人为因素引起的变化。

自动化可以提供效率、准确性、一致性和可靠性等多重好处，从而改善工作流程、节省时间和资源，并提供更好的结果。

前端开发中，自动化的应用

上面介绍了自动化的优点，那自动化在前端开发中到底该如何应用呢？我们可以在 Github 上随意打开一个大型前端开源项目的源码，源码的目录结构中往往都会包含一个名为 scripts 的文件夹，而 scripts 文件夹里存放的就是自动化的脚本。

例如：Element UI 库

在前端开发中，自动化脚本可以应用于许多方面，下面两个是常见的应用场景：

构建和打包：自动化脚本可用于构建和打包前端应用程序。通过工具如 Webpack、Gulp、Grunt 等，可以编写脚本来自动执行任务，例如代码合并、css样式提取、资源优化等，以生成最终的部署文件。
自动化部署和发布：自动化脚本可以用于部署和发布编译后的代码到 npm / github 等平台，自动变更版本号等。

然而自动化脚本并不局限于此，在需要频繁重复操作的场景上使用自动化，那感觉才是非一般的爽，哈哈。

就如，最近在整理自己开发过程中累积的工具函数，将它们分类整理，并封装为自己专属的 Utils 库。在整理的过程中发现每个函数都要在分类目录的index中导出，然后将分类目录在主index.ts文件中导出，在这过程中，一直重复操作，心烦不说，还容易漏导出函数，如下图所示 (图片只显示部分函数，还有部分目录未展开), 每个分类都包含若干工具函数和一个index.ts文件用来将这些函数统一导出。

index.ts文件

每个export项都要指定函数目录，这些导出操作都是重复性的，所以我决定编写一个自动化脚本来帮助我将这些函数导出，彻底解放我的双手！

编写自动化脚本的准备

首先先安装两个库： tsx 和 glob

tsx : 是一个 CLI 命令（替代node），用于在包类型中无缝运行 TypeScript 和commonjsESM module，具体用法请到库地址查询。

glob : 用于在文件系统中查找与指定模式匹配的文件路径。它提供了一种简单而强大的方式来处理文件路径的模式匹配，类似于命令行中的通配符，具体用法请到库地址查询。

less 复制代码

pnpm i -D tsx glob
// 或
npm i -D tsx glob

在项目里新建 scripts 目录，再在该目录中新建 auto-export.ts 文件。

在文件中引入所用到的函数：

ts 复制代码

// auto-export.ts
import path from 'node:path'
import fs from 'node:fs'
import { glob } from 'glob'

使用 glob 的sync同步函数来遍历目录，sync函数接收两个参数, 路径和配置项, 函数结果返回一个路径数组，如下所示：

glob.sync ( 路径 : string | string[], 配置项 ：object): sting[]

根据函数用法，在文件中使用，不用传入第二个参数：

ts 复制代码

// auto-sync
glob.sync('**/index.ts').forEach((filePath) => {
  
})

第一个参数传入要匹配的文件路径，这里使用通配符来深度遍历文件夹中的所有 index.ts 文件，然后使用forEach遍历匹配到的路径地址数组。

打印匹配结果如下：

css 复制代码

src/index.ts
src/i18n/index.ts
src/_internal/index.ts
src/Vue/index.ts
src/String/index.ts
src/RegExp/index.ts
src/Object/index.ts
src/Number/index.ts
src/Is/index.ts
src/Function/index.ts
src/Format/index.ts
src/Event/index.ts
src/Escape/index.ts
src/Error/index.ts
src/Dom/index.ts
src/Date/index.ts
src/Color/index.ts
...

接下来根据这些路径来处理工具函数的导出

ts 复制代码

// auto-export.ts
import path from 'node:path'
import fs from 'node:fs'
import { glob } from 'glob'

glob.sync('**/index.ts').forEach((filePath) => {
   /** 提取文件所在的目录 */
  const dirname = path.dirname(filePath)

  /** 获取index文件所在目录中的所有文件 */
  const files = fs.readdirSync(dirname).flatMap((file) => {
    // 排除 index.ts 文件
    if (file === 'index.ts')
      return []

    // 判断是否为 ts 文件
    if (file.endsWith('.ts')) {
      /** 如果是ts文件，则获取文件内容 */
      const fileContent = fs.readFileSync(`${dirname}/${file}`, 'utf-8')
      /** 在文件内容里匹配 export 关键字 */
      const hasExportItem = /export\s+/.test(fileContent)

      /** 如果没有 export 关键字，则不用导出 */
      if (!hasExportItem)
        return []

      // 如果有 export 关键字，则导出文件名，不要包含 .ts 后缀
      return [file.replace(/\.ts$/, '')]
    }

    return file
  })

  // 将提取的工具函数写入到 index.ts 文件中
  fs.writeFileSync(filePath, files.map(file => `export * from './${file}'`).join('\n'))
})

ok, 就是上面短短的几行代码，就将繁琐的函数导出操作封装为自动化脚本了，接下来在 packages.json 文件中新增脚本命令

json 复制代码

// packages.json
"scripts": {
    "export": "tsx ./scripts/auto-export"
  }

接下来就是测试环节，在控制台输入 pnpm export 即可看到index.ts文件里自动导出工具函数了。

如动图所示，几乎是瞬间就将繁琐的操作在片刻间完成，如果手动导出这些函数，估计要累到吐血了，哈哈。

注意：脚本是以index.ts文件为匹配目标的，在新建目录时，记得在目录里新建 index.ts 文件。

下一篇自动化脚本动图预告(自动创建组件模版)：