JavaScript

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > umi 核心插件模块

独立使用umi的核心插件模块示例详解

作者:聪小陈

这篇文章主要为大家介绍了独立使用 umi 的核心插件模块示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

引言

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

实践

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

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

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

pnpm i @umijs/core @umijs/utils father 

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

import { defineConfig } from 'father';
export default defineConfig({
  cjs: {
    output: 'dist',
  },
});
  "scripts": {
    "build": "father build",
    "dev": "father dev",
  },

这里是扩展了 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 传入的参数。

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();
#!/usr/bin/env node
require('../dist/cli')
  "bin": {
    "konos": "bin/konos.js"
  },

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

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

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

这里我们用到了 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;
    },
  });
};
- await new Service().run({
+ await new Service({ plugins: [require.resolve("./version")] }).run({
      name: args._[0],
      args,
    });

执行 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 

如果你在窗口中看到版本号正确打印,说明你的以上操作都是正确的。恭喜你,你已经完成了一个基础框架架构的搭建。

源码归档

结语

以上就是独立使用 umi 的核心插件模块示例详解的详细内容,更多关于umi 核心插件模块的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文