elpis里程碑五：npm抽离和发布

背景

在前四个里程碑中，我们实现了一个基于Vue的全栈系统，沉淀80%的配置，并拓展20%的自定义配置，来减轻工作量，但是它始终是一个系统，这意味着使用方很可能不小心改到核心代码而导致报错，因此这一章需要把它抽离成一个框架，分离业务

实现

这里主要分离的有以下几点：

1. elpis-core核心代码
2. webpack配置
3. 业务页面抽离

为了便于抽离后的调试，要用一个demo项目来调试，这里就要用到npm link xxx来关联起来，这样就方便本地调试elpis了

抽离elpis-core

elpis-core的核心是把config, middleware,extend, service, controller, router, router-schema目录里的文件读取出来并挂载到app上，从而遵从“约定大于配置”的规范

抽离elpis-core需要使业务方目录下的这些目录也能读取到，这里的核心是process.cwd()来读取当前进程目录，同时elpis本身的目录也要加载，这里用__dirname

此外，elpis-core的启动命令要暴露出去，变成一个对象，对象包括elpis node启动命令及options配置

抽离webpack

webpack 工程化配置里对以下部分进行改造：

1. dev, prod启动命令改成函数，并在elpis-core入口文件里引入，供外部调用
2. webpack 配置支持读取原有elpis目录和业务所在目录的文件，包括入口文件目录，打包目录

抽离业务页面

抽离业务页面，会涉及到两方面：

1. 业务方使用elpis内部封装好的 schema 组件，utils工具函数等
2. elpis识别到业务方配置的动态组件、路由

因此需要在webpack的 alias配置里，配置elpis本身的别名和业务方的别名，并在elpis里新增对业务方动态组件、路由的引入

发布

先确保本地的npm源是npm官方源，然后用npm login登录npm账号，最后执行 npm publish @npm账号/elpis 发布，如果能在npm官网看到自己的包，说明发布成功啦。

总结

npm抽离主要做的事是让原本的elpis本身目录扩展到业务方的目录，这是第一个我自己发布的npm包，收获颇丰

注：内容来自抖音哲玄前端 699课：大前端全栈实践