elpis业务抽离，并发布npm包

小怪点点
6 阅读4分钟

在elpis-demo新项目中引用elpis包后进行使用开发

发包前怎么本地引用自己的SDK包

创建软连接

  • npm 网站上注册账号，将账号名字加到 ee 的 package.json 上的 name 中（"name": "@npmname/ee")
  • 在 ee项目 终端： npm link 将这整个包软链到系统里，系统里就会有这个包了
  • 在引用的地方，npm link @npmname/ee，就引入了这个本地包，生成 node_modules，就可以本地调试

elpis重构

elpis 的 package.json 中 main 是 index，所以入口是 index.js，在该文件里暴露方法，供外部调用，所以需要 module.exports （这个过程也体现了重构）

将elpis中服务启动及前端项目打包方法暴露出来

elpis前端工程化怎么暴露给外部使用方使用？ 将 dev.js 和 prod.js 用 module.exports 一个函数出去，因为之前该文件是直接运行的，改造后需要业务方调用后才可启动

修改 loader

（修改加载路径，改成可加载 elpis 下的文件，也能加载业务的文件）

  • 1、修改 elpis-core 的 loader/middleware 文件，获取 elpis 以及外部业务调用方 app/middleware 下文件
  • 2、router-schema 改动加载路径
  • 3、controller
  • 4、service
  • 5、config 加载 config 文件
  • 6、extend
  • 7、全局中间件
  • 8、router

elpis-demo业务项目可自定义扩展

elpis重构时，loader加载文件已经修改为可加载自身和调用方特定目录下的文件。 webpack.base.js 中核心改动是要加载业务调用方的文件进行解析。 支持业务方自定义 webpack 配置。 别名修改的更符合语义。

1、自定义页面开发 ssr 渲染

将 project-list 移到业务方 elpis-demo 相关目录下

问题1: 在业务项目中引用elpis包后，run build后，报错一些包找不到，如vue等

  • 因为业务代码并未安装vue，所以找不到，将elpis中的vue在webpack中起别名，指定从自身项目依赖中找，vue: require.resolve('vue'),

  • webpack配置 loader 加载路径问题：babel-loader (loader)找不到，插件找不到，运行之后，是在调用方 elpis-demo 的 node_modules 里找，因为我们没安装，所以没有，我们不可能让调用方一个一个装，所以需要告诉 webpack，使用 elpis 自己内部的 node_modules；使用 require.resolve(babel-loader)

    使用 require.resolve('babel-loader') 的主要目的是：

    • 精确控制依赖来源：确保从项目本地的 node_modules 加载
    • 避免版本冲突：防止意外加载到父目录或全局的不同版本
    • 提高构建可靠性：在多项目环境中保持一致性
    • 更好的可移植性：当项目作为依赖被其他项目使用时
    • 这是一个防御性编程的做法，尤其在复杂的项目结构或需要高可靠性的构建配置中，使用 require.resolve 可以避免很多微妙的依赖问题。
2、自定义 view，在 dashboard 下增加自定义页面

问题: 将 todo 页面放到业务elpis-demo特定目录下，定义一个 todo 相关路由 js，在 elpis 里引用，并在elpis使用别名定义路径，但是如果业务方未定义，这个别名设置会报错。 webpack 是静态构建时校验，nodejs 处理的，而不是运行时

  • 解决办法：elpis 可以创建个空文件，如果找不到业务方配置的文件，就加载这个空文件。保证必然能拿到一个文件

在 alias 中写：注意，alias 需要变成一个立即执行函数，添加下边内容，返回之前的配置

alias: (() => {
    // 下方逻辑
    return {
        vue: require.resolve('vue'),
        // 其他别名 ....
        ...aliasMap
    }
})()

const aliasMap = {};
const blankModule = path.resolve(\_\_dirnamne, './libs/blank.js');

// dashboard 路由配置扩展
const businessDashboardRouterConfig = path.resolve(
   process.cwd(),
   './app/pages/dashborad/router.js'
);
aliasMap['$businessDashboardRouterConfig'] = fs.existsSync(
  businessDashboardRouterConfig
)? businessDashboardRouterConfig : blankModule;
3、自定义 dashboard 下的 schema-view 的扩展组件
4、自定义 widgets 下 schema-form 下的组件
5、自定义 widgets 下 schema-search-bar 下的组件

整理 package.json 文件

将 elpis的devDependencies 中的部分依赖移动到 denpendencies 中，外部的调用方会用到

静态资源路径修改

将elpis中静态路径进行修改，按需修改为业务根目录开始加载，或者两者都加载

// 配置静态根路径
  const koaStatic = require('koa-static');
  app.use(koaStatic(path.resolve(__dirname, './public')));
  app.use(koaStatic(path.resolve(process.cwd(), './app/public')));

// 指定静态文件目录 静态资源 访问 协议://域名:端口/xxx/xxx，会到public/dist目录下找xxx资源
// 此处要配置成业务调用方的静态文件路径，否则会拿不到静态资源app.use(express.static(path.join(process.cwd(), './app/public/dist')));
avatar
文章
阅读
粉丝