欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

獨立使用umi的核心插件模塊示例詳解

 更新時間：2023年01月12日 09:38:16   作者：聰小陳  
這篇文章主要為大家介紹了獨立使用?umi?的核心插件模塊示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

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

實踐

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

  • 新建空白文件夾，mkdir konos

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

  • 初始化 npm 項目 npm init -y

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

  • 安裝 @umijs/core 、@umijs/utils 和 father
pnpm i @umijs/core @umijs/utils father
  • 新增 father 配置 .fatherrc.ts

father 是一個代碼編譯包，它提供了很多豐富和實用的配置，來幫助你構(gòu)建 node 包和組件庫，如果你對 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",
  },
  • 新建一個自定義服務(wù)，新建文件 src/service

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

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

你將會在窗口中看到一個錯誤，提示你 version 命令沒有注冊。

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

  • 嘗試添加 version 命令插件

這里我們用到了 umi 的插件開發(fā)的知識，使用了 registerCommand 來聲明一個可執(zhí)行命令。如果你不了解插件開發(fā)的知識的話，可以先記住聲明命令的模版代碼就是這么編寫的，后續(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

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

源碼歸檔

結(jié)語

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

相關(guān)文章

最新評論