使用過 Umi 框架的人一定會對它的約定式路由印象深刻。在約定式路由模式下，pages 目錄下新建文件，其他頁面即可直接書寫鏈接進行跳轉(zhuǎn)。

Taro 框架中自帶了路由功能，但是每新建一個頁面文件后，需要在 app.config.ts 文件中配置頁面地址，在進行頁面跳轉(zhuǎn)時，還需要帶上長長的一串鏈接，書寫麻煩的同時還容易出錯。

navigateTo({
  url: `/package-appointment/pages/manage-appointments/index?roomId=${roomId}&appointmentId=${appointmentId}&scriptId=${scriptId}`
})
復制代碼

將頁面地址維護到一個映射表中，方便管理和使用。

navigateTo({
  url: `${URLs.ManageAppointment}?roomId=${roomId}&appointmentId=${appointmentId}&scriptId=${scriptId}`
})
復制代碼

但是又帶來的新的問題，開發(fā)一個頁面，不僅要維護 app.config.ts 還要維護映射表文件。且參數(shù)又長又不美觀。

如何解決這些問題呢?

經(jīng)過我不斷摸索，可以做到新建頁面文件后，0配置，其他頁面直接調(diào)用類似下面的API，即可進行跳轉(zhuǎn)

routerService.toManageAppointments({ roomId, appointmentId, scriptId })
復制代碼

下圖演示了，刪除分包頁面后，自動更新 app.config.ts

正文

實現(xiàn)原理很簡單：1.監(jiān)聽頁面文件創(chuàng)建。2.執(zhí)行腳本修改和生成代碼。

監(jiān)聽頁面文件/文件夾創(chuàng)建

說到監(jiān)聽，我們首先會想到 webpack -watch 模式。但要注意的是，webpack 只監(jiān)聽代碼依賴樹中的文件，即新建的文件或文件夾是不會被 webpack 監(jiān)聽的。那如何實現(xiàn)監(jiān)聽頁面文件的創(chuàng)建呢？Node 有 watch API 可以實現(xiàn)這一點，但在各個平臺可能存在各種各樣的問題，因而我使用了 chokidar 去監(jiān)聽文件創(chuàng)建。

工具是有了，但怎么整合到項目中呢？總不能打開兩個控制臺，一個跑項目，一個跑文件監(jiān)聽吧。webpack-plugin-chokidar插件可以解決問題，通過 taro 的 webpackChain 配置，可以很容易監(jiān)聽文件/文件夾修改。

插件監(jiān)聽配置實例如下

const basePath = path.resolve(__dirname, '../src');

...
new WebPackPluginChokidar({
  chokidarConfigList: [
    {
      file:  basePath + '/**/pages/**/index.tsx',	// 監(jiān)聽路徑(支持主包和分包)
      opt: { persistent: true, ignoreInitial: true },	// 監(jiān)聽配置選項( 配置項參考chokidar)
      actions: {
        on: {
          add: ({ compiler, compilation, watcher }, path, ...rest) => {	// 監(jiān)聽文件創(chuàng)建
            console.log(`File ${path} has been added`);
          },
        },
      },
    },
  ],
});

復制代碼

在上面代碼中，只需要在 add 回調(diào)函數(shù)中，調(diào)用修改代碼腳本即可。

代碼修改與生成

這一步中，需要修改 project.config.json和app.config.ts，和生成 routerService.ts 文件。project.config.json 文件很好處理，直接在腳本中通過 require 引入，當做一個 JS 對象操作，最后通過 Node fs API 寫入即可。

我們修改代碼最常用的是直接 fs.readFile 讀文件，字符串匹配更換文本，這樣操作雖然簡單快捷，但精度低，且不夠優(yōu)雅。

Babel玩的熟的，會使用 babel 解析代碼成 ast，修改 ast， 最后 generate 代碼，再寫入文件。

ts-morph是一個新增/修改 typescript 代碼的庫，相比 babel 修改 ts 代碼, 更簡單，更易使用。

我使用了 ts-morph 修改 app.config.ts 和生成 routerService.ts。

下面的配置，是我們項目目前在使用的部分配置，嫌麻煩的，可以直接到這里下載 demo，不想安裝這幾個包的，可以參考modifyAppConfig，generateRouterService 代碼實現(xiàn)，改一改之后，編譯成 js 代碼，直接在監(jiān)聽文件變更的回調(diào)函數(shù)中使用即可。

generated

這是一個代碼生成管理工具。代碼很簡單，它注冊了一個 generated 命令，讀取插件配置文件夾的配置供插件使用。我們的功能需要通過插件實現(xiàn)，安裝該工具后進行下列配置。

1、在根目錄新建 generated 配置文件 .generatedrc.ts

2、注冊插件

import { GeneratedrcConfig } from 'generated'

const generatedrc: GeneratedrcConfig = {
  configDir: './gconfig', // generated 插件配置目錄
  plugins: [
    'generated-plugin-taro-router-service'  // 注冊插件
  ],
}

export default generatedrc
復制代碼

generated-plugin-taro-router-service

在這個插件中，實現(xiàn)了修改代碼和生成routerService文件。

需要進行下列配置

1、在根目錄新建 gconfig 文件夾，文件夾下新建 router.ts 配置文件.

2、寫入配置

import { Config } from 'generated-plugin-taro-router-service'

const basePath = process.cwd()

export const taroRouter: Config = {
  // 源碼目錄
  pageDir: basePath + '/src',
  
  // app.config 路徑
  appConfigPath: basePath + '/src/app.config.ts',

  // project.config.json 路徑
  projectConfigPath: basePath + '/project.config.json',

  // 輸出文件名
  outputFileName: 'routerService',

  /**
   * 導入組件
   * 
   * 輸出的文件將導入方法
   * import { customNavigateTo } from '@/business/app'
  */
  navigateFnName: 'customNavigateTo', // 導入方法名
  navigateSpecifier: '@/business/app', // 方法導入標識符
  
  /**
   * 格式化文件名
   * 頁面文件名可能會出現(xiàn)類似 edit-name 的寫法，這種 name 無法作為類屬性，所以需要 formatter 函數(shù)格式化
  */
  formatter(name) {
	return (name.split('-') || []).reduce((t, c) => t + upFirst(c), '')
  }
}
復制代碼

工具內(nèi)部沒有直接使用taro 原生的 navigateTo 方法，而是需要手動配置方法。一是因為 taro 導出的路由 API 并不好用，二是 API 封裝在內(nèi)部，自定義程度不夠高。

shelljs 進行腳本調(diào)用

在文件監(jiān)聽的回調(diào)函數(shù)中，利用 shelljs 執(zhí)行 generated 命令即可。

其他

本文提到的幾個倉庫如下:

• ts-morph 修改、生成 typescript 代碼
• chokidar 監(jiān)聽文件變動
• webpack-plugin-chokidar 將 chokidar 整合到 webpack 使用，需在 webpack dev 模式下使用
• generated 代碼生成管理工具
• generated-plugin-taro-router-service 修改代碼腳本