独立使用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
如果你在窗口中看到版本号正确打印，说明你的以上操作都是正确的。恭喜你，你已经完成了一个基础框架架构的搭建。
结语
以上就是独立使用 umi 的核心插件模块示例详解的详细内容，更多关于umi 核心插件模块的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了JS实现layui table筛选框记忆功能,本案例放入本地缓存的方式，使用MutationObserver实现监控点击事件，需要的朋友可以参考下2022-01-01
这篇文章主要为大家介绍了JS前端模拟Excel条件格式实现数据条效果，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要为大家介绍了浏览器切换到其他标签页或最小化是js定时器是否准时的测试详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了利用 JavaScript 构建命令行应用，下面文章围绕如何利用JavaScript 构建命令行应用的相关资料炸开详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要为大家介绍了前端框架arco table源码遇到的问题解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章我们主要谈一谈js中的宏任务和微任务，JavaScript是一门单线程语言，即一次只能完成一个任务，若有多个任务要执行，则必须排队按照队列来执行，下面我们就来简单谈谈JavaScript吧,需要的朋友可以参考下面文章内容的具体内容2021-09-09
这篇文章主要为大家介绍了autojs绘画实现六边形示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了通用化解决个性化文字换行问题实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了微前端之 js隔离 样式隔离 元素隔离问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了微信小程序 WXDropDownMenu组件详解及实例代码的相关资料,需要的朋友可以参考下2016-10-10
最新评论