里程碑四与五：基于 vue 动态组件库建设与抽象封装并发布npm包

引言

碍于里程碑四基本是写通用组件，糅合到里程碑五一起写，偷点懒

自于抖音"哲玄前端"课程 (《大前端全栈实践课》）

里程碑四

这个阶段主要是封装通用组件，解析核心在里程碑三中，而此阶段中最重要的也就是设计思路，也就是面试时所问的问题：封装组件，你一般会考虑哪些问题？

组件设计的思路

接收什么属性
返回什么事件
暴露什么方法

里程碑五

这个阶段的目标是发 npm 包，需要抽离项目内部的业务类型代码、在其他项目使用时如何加载非 elpis 的相关配置及在其他项目中的启动及打包。

一、本地 npm 包的调试

必备条件是一个 npm 账号，在 package.json 中的 name 属性中添加私有域配置，

js 复制代码

{
    name:"@xxxxxx/elpis" // 原代码 name:"elpis"
}

package.json
执行命令 `npm link` 开放链接，在demo项目中就可以用 `npm link @xxxxxx/elpis` 链接到本地npm包，此时在node_module中也会带有 `@xxxxxx/elpis` 的依赖项

二、主入口文件

在demo项目中，启动和打包 elpis ，需要改造 elpis的入口文件 index.js 暴露启动命令供demo项目执行。

js 复制代码

// 引入 elpis-core
const ElpisCore = require("./elpis-core");

// 引入 前端工程化构建方法
const FEBuildDev = require("./app/webpack/dev.js");
const FEBuildProd = require("./app/webpack/prod.js");

module.exports = {
    /**
    * 编译构建前端工程 
    * @params env 环境变量 local/prod
    */
    frontendBuild(env) {
        if (env === "local") {
            FEBuildDev();
        } else if (env === "production") {
            FEBuildProd(); 
        }
    }，
    /**
    * 启动 elpis
    * @param options 项目配置，透传到elpis-core
    */
    severStart(options = {}) {
        const app = ElpisCore.start(options);
        return app;
    }
    
    // 基础类暴露 
    Controller: { 
        Base: require('./app/controller/base.js')
    }, 
    Service: { 
        Base: require('./app/service/base.js')
    }
}

index.js

三、elpis-core 加载其他项目相关配置

在 elpis-core 中，是使用项目根目录作为起始process.cwd()，在其他项目中肯定找不到相应目录，需要将起始改为当前目录__dirname，同时加载其他项目的配置文件

js 复制代码

//读取 elpis/app/xxx/**/**.js下所有文件
const elpisServicePath = path.resolve(
    __dirname,
    `..${sep}..${sep}app${sep}service`
)

//读取 业务/app/xxx/**/**.js下所有文件
const businessServicePath = path.resolve(app.businessPath, `.${sep}service`);

四、webpack配置相关改造

elpis 项目的依赖，在打包时虽然可以要求在其他项目中安装相同的依赖，但总归不太好，所以需要在elpis项目的打包配置进行更改，使用 elpis项目本身的依赖进行打包，如：

js 复制代码

use:{
    loader:path.resolve("babel-loader") // 原代码 loader: "babel-loader"
    option:{
        presets: [require.resolve("@babel/preset-env")] // 原代码 presets: ["@babel/preset-env"]
    }
}

webpack.base.js

在 elpis 加载其他项目中的配置时，有些文件不一定会有，打包肯定会报错，需要个解决方案，而读取时一般是在打包配置文件中alias项设置别名，方案如下：

1、新建空模块

js 复制代码

module.exports = {}

blank.js
2、将 `alias`变更为匿名函数进行返回

3、使用 fs的 existsSync方法，判断文件是否存在，存在就加载，否则就加载空模块

js 复制代码

fs.existsSync(xxxxx) ? xxxxx : blank; // blank 空模块地址

五、清理 package.json

将 package.json中不需要的命令清除掉以及开发环境相关依赖转移至生产环境中，那么最后的准备工作就完成，可以开始发npm包了，当然也别忘了相关的文档README.md

六、npm包发布

最重要的环节了，发布npm包

重置npm源 npm config set registry
登录npm npm login，点击命令行内最下面的网址，在注册邮箱内拿到验证码后填进去就登录成功了
发布npm包 npm publish，带有命名空间@xxxx，使用npm publish --access public

就发布成功了