独立使用umi的核心插件模块示例详解_编程技术

引言

今天我们做一个有趣的尝试，将 umi 的核心插件模块独立出来作为另一个框架的基础架构，这里我们将它称为 konos。介于 umi 自身的源码的独立拆分，要实现这个功能其实非常的简单。只需要单独使用 @umijs/core 就好。

实践

先看具体实践吧。以下步骤都是常规编写 cli 的一些步骤，我就不做过多的说明，如果你看不懂其中的某些代码，可以评论区留言，或者查看我的其他文章。

新建空白文件夹，mkdir konos

你可以根据你使用的电脑执行对应的命令来新建一个文件夹，当然最简单的还是在你想要存放的位置使用鼠标右键新建文件夹。

初始化 npm 项目 npm init -y

-y 表示 npm cli init 时提出的所有问题，我们都使用默认，因为这些信息都可以在后续的 package.json 中手动修改，所以我喜欢使用 -y 来跳过这些交互，你完全可以按照你自己的喜好来初始化。

安装 @umijs/core 、@umijs/utils 和 father

				?

									pnpm i @umijs/core @umijs/utils father

新增 father 配置 .fatherrc.ts

father 是一个代码编译包，它提供了很多丰富和实用的配置，来帮助你构建 node 包和组件库，如果你对 father 感兴趣，可以从官网获取所有配置的说明，我们以下配置表示，使用 cjs 的方式，将 src 文件夹构建到 dist。

				?

									import { defineConfig } from 'father';

									export default defineConfig({

									  cjs: {

									    output: 'dist',

									  },

									});

增加执行命令 package.json 中增加 build script

				?

									"scripts": {

									  "build": "father build",

									  "dev": "father dev",

									},

新建一个自定义服务，新建文件 src/service

这里是扩展了 umi core 的 Service，为了便于理解，这里的常量都是写死的，其实在扩展的时候，我们可以使用一些动态获取的数据来覆盖这些参数，达到给用户更大的自定义空间。

				?

									import { Service as CoreService } from "@umijs/core";

									const DEFAULT_CONFIG_FILES = [".konorc.ts", ".konorc.js"];

									export class Service extends CoreService {

									  constructor(opts?: any) {

									    const cwd = process.cwd();

									    super({

									      ...opts,

									      env: process.env.NODE_ENV,

									      cwd,

									      defaultConfigFiles: DEFAULT_CONFIG_FILES || opts.defaultConfigFiles,

									      frameworkName: "konos",

									      presets: opts?.presets || [],

									      plugins: opts?.plugins || [],

									    });

									  }

									}

增加 cli 主入口文件，新建文件 src/cli.ts

这里就是常规的格式化一下 cli 传入的参数。

				?

									import { printHelp, yParser } from '@umijs/utils';

									import { Service } from './service';

									export async function run() {

									  const args = yParser(process.argv.slice(2), {

									    alias: {

									      version: ['v'],

									      help: ['h'],

									    },

									    boolean: ['version'],

									  });

									  try {

									    await new Service().run({

									      name: args._[0],

									      args,

									    });

									  } catch (e: any) {

									    console.log(e);

									    printHelp.exit();

									    process.exit(1);

									  }

									}

									run();

增加 bin 入口文件，新建文件 bin/konos.js

				?

									#!/usr/bin/env node

									require('../dist/cli')

测试命令是否可用，package.json 中增加 konos script

				?

									"bin": {

									  "konos": "bin/konos.js"

									},

执行测试命令 pnpm run konos version

执行 pnpm build 或者 pnpm dev 构建现有代码。再执行 pnpm run konos version

你将会在窗口中看到一个错误，提示你 version 命令没有注册。

Error: Invalid command version, it's not registered.

尝试添加 version 命令插件

这里我们用到了 umi 的插件开发的知识，使用了 registerCommand 来声明一个可执行命令。如果你不了解插件开发的知识的话，可以先记住声明命令的模版代码就是这么编写的，后续我再写文章说明。

				?

									import type { PluginAPI } from "@umijs/core";

									export default (api: PluginAPI) => {

									  api.registerCommand({

									    name: "version",

									    alias: "v",

									    description: "show konos version",

									    configResolveMode: "loose",

									    fn({}) {

									      const version = require("../package.json").version;

									      console.log(`konos@${version}`);

									      return version;

									    },

									  });

									};

在 konos 中使用 version 插件，修改文件 src/cli.ts

				?

									- await new Service().run({

									+ await new Service({ plugins: [require.resolve("./version")] }).run({

									      name: args._[0],

									      args,

									    });

执行测试命令 pnpm run konos version

执行 pnpm build 或者 pnpm dev 构建现有代码。再执行 pnpm run konos version。

				?

									➜  konos pnpm run konos version

									> konos@1.0.0 konos /Users/xx/konos

									> node bin/konos.js "version"

									konos@1.0.0

									➜  konos