引言

今天我們做一個(gè)有趣的嘗試，將 umi 的核心插件模塊獨(dú)立出來作為另一個(gè)框架的基礎(chǔ)架構(gòu)，這里我們將它稱為 konos。 介于 umi 自身的源碼的獨(dú)立拆分，要實(shí)現(xiàn)這個(gè)功能其實(shí)非常的簡單。只需要單獨(dú)使用 @umijs/core 就好。

實(shí)踐

先看具體實(shí)踐吧。以下步驟都是常規(guī)編寫 cli 的一些步驟，我就不做過多的說明，如果你看不懂其中的某些代碼，可以評(píng)論區(qū)留言，或者查看我的其他文章。

• 新建空白文件夾，mkdir konos

你可以根據(jù)你使用的電腦執(zhí)行對(duì)應(yīng)的命令來新建一個(gè)文件夾，當(dāng)然最簡單的還是在你想要存放的位置使用鼠標(biāo)右鍵新建文件夾。

• 初始化 npm 項(xiàng)目 npm init -y

-y 表示 npm cli init 時(shí)提出的所有問題，我們都使用默認(rèn)，因?yàn)檫@些信息都可以在后續(xù)的 package.json 中手動(dòng)修改，所以我喜歡使用 -y 來跳過這些交互，你完全可以按照你自己的喜好來初始化。

• 安裝 @umijs/core 、@umijs/utils 和 father

pnpm i @umijs/core @umijs/utils father 

• 新增 father 配置 .fatherrc.ts

father 是一個(gè)代碼編譯包，它提供了很多豐富和實(shí)用的配置，來幫助你構(gòu)建 node 包和組件庫，如果你對(duì) father 感興趣，可以從官網(wǎng)獲取所有配置的說明，我們以下配置表示，使用 cjs 的方式，將 src 文件夾構(gòu)建到 dist。

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

• 增加執(zhí)行命令 package.json 中增加 build script

  "scripts": {
    "build": "father build",
    "dev": "father dev",
  },

• 新建一個(gè)自定義服務(wù)，新建文件 src/service

這里是擴(kuò)展了 umi core 的 Service，為了便于理解，這里的常量都是寫死的，其實(shí)在擴(kuò)展的時(shí)候，我們可以使用一些動(dòng)態(tài)獲取的數(shù)據(jù)來覆蓋這些參數(shù)，達(dá)到給用戶更大的自定義空間。

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

這里就是常規(guī)的格式化一下 cli 傳入的參數(shù)。

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"
  },

• 執(zhí)行測試命令 pnpm run konos version

執(zhí)行 pnpm build 或者 pnpm dev 構(gòu)建現(xiàn)有代碼。再執(zhí)行 pnpm run konos version

你將會(huì)在窗口中看到一個(gè)錯(cuò)誤，提示你 version 命令沒有注冊。

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

• 嘗試添加 version 命令插件

這里我們用到了 umi 的插件開發(fā)的知識(shí)，使用了 registerCommand 來聲明一個(gè)可執(zhí)行命令。如果你不了解插件開發(fā)的知識(shí)的話，可以先記住聲明命令的模版代碼就是這么編寫的，后續(xù)我再寫文章說明。

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,
    });

• 執(zhí)行測試命令 pnpm run konos version

執(zhí)行 pnpm build 或者 pnpm dev 構(gòu)建現(xiàn)有代碼。再執(zhí)行 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 

如果你在窗口中看到版本號(hào)正確打印，說明你的以上操作都是正確的。恭喜你，你已經(jīng)完成了一個(gè)基礎(chǔ)框架架構(gòu)的搭建。

源碼歸檔

結(jié)語

以上就是獨(dú)立使用 umi 的核心插件模塊示例詳解的詳細(xì)內(nèi)容，更多關(guān)于umi 核心插件模塊的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論