elpis npm 报发布

注：文章理解源于哲玄前端（全栈）的大前端全栈实践

前言

程序员常说，避免重复造轮子，不要单纯依赖 Ctrl + C 和 Ctrl + V 进行代码复用。对此，我深感认同。

在实现某个需求时，我们首先应该意识到，这个问题可能已经被他人解决，并且他们可能考虑得更全面，实现得更完善。你或许会觉得自己动手实现更有成就感，但如果已有成熟的开源方案可用，何必舍近求远？放弃庞大的生态和丰富的开源资源，实在是种浪费。

此外，直接复制粘贴代码往往会导致维护困难，代码缺乏一致性，甚至可能引入隐蔽的错误。而通过发布 NPM 包，不仅能提高代码的复用性，还能促进开源生态的发展，为社区贡献一份力量。

而本文将为你讲述的是如何将 Elpis 从业务项目转为 SDK 并通过 npm 提供对外服务的。

Elpis 服务

Elpis 的核心目标是 沉淀 80% 的重复性工作，为 20% 的定制化需求提供高效开发支持，助力构建多套系统。这依赖于 领域模式，通过对外提供 可扩展控件，支持 自定义路由页 及 自定义单文件页程序，让开发者能够灵活扩展和定制功能。

业务项目转为 SDK

所需改动内容如下

• 调整 index.js：从可执行文件改为对外暴露方法。
• 优化 elpisCore 文件处理：不仅处理框架内部的文件，也要兼容使用方的文件。
• 修改 Webpack 配置：不仅配置框架的路径别名，还需支持使用方的路径别名。
• 增强控件扩展能力。
• 支持自定义路由页。
• 提供 README.md 文件 进行项目介绍。

下面重点讲解 控件扩展能力 和 自定义路由页 的实现方式。

1. 控件扩展能力

以 form 控件扩展为例：

import input from "./complex-view/input/input.vue";
import inputNumber from "./complex-view/input-number/input-number.vue";
// 业务扩展 form-item 配置
import BusinessComponentConfig from "$businessFormItemConfig";

const FormItemConfig = {
  input: {
    component: input,
  },
  inputNumber: {
    component: inputNumber,
  },
};

export default { ...FormItemConfig, ...BusinessComponentConfig };

2. 自定义路由页

import boot from "../boot.js";
import dashboard from "./dashboard.vue";
import businessDashboardRouterConfig from "$businessDashboardRouterConfig";

const routes = [];

// 头部菜单路由
routes.push({
  path: "/view/dashboard/iframe",
  component: () => import("./complex-view/iframe-view/iframe-view.vue"),
});
routes.push({
  path: "/view/dashboard/schema",
  component: () => import("./complex-view/schema-view/schema-view.vue"),
});

const siderRoutes = [
  {
    path: "iframe",
    component: () => import("./complex-view/iframe-view/iframe-view.vue"),
  },
  {
    path: "schema",
    component: () => import("./complex-view/schema-view/schema-view.vue"),
  },
];

// 侧边栏菜单路由
routes.push({
  path: "/view/dashboard/sider",
  component: () => import("./complex-view/sider-view/sider-view.vue"),
  children: siderRoutes,
});

// 业务拓展路由
if (typeof businessDashboardRouterConfig === "function") {
  businessDashboardRouterConfig({ routes, siderRoutes });
}
// 侧边栏兜底策略
routes.push({
  path: "/view/dashboard/sider/:chapters+",
  component: () => import("./complex-view/sider-view/sider-view.vue"),
});

boot(dashboard, { routes });

自定义路由页同样基于 约定 + 路径别名引入 的方式实现，通过动态调整 businessDashboardRouterConfig，确保路由的可扩展性和灵活性。

发布到 npm

完成以上改造后，只需在 package.json 中确定 name 和 version 字段，即可执行以下命令进行发布：

npm login
npm publish

至此，我们已成功将 Elpis 业务项目转换为 SDK，并通过 NPM 对外提供服务，提升代码复用性，为开源生态贡献一份力量。