CabloyJS 基于 EggJS 实现的模块编译与发布

背景

现在， EggJS 被许多开发团队所采用。有的团队基于 商业知识产权 的考量，往往会提一个问题：是否可以把 EggJS 当中的代码编译打包，然后再把代码丑化？

模块编译的机制

• EggJS 为何不能便利的实现 编译 的特性？

在 EggJS 中，代码文件都是通过 约定代码位置 的方式组织并加载的。也就是说，代码文件都放置在约定的目录结构当中，EggJS在启动系统时，在约定的位置扫描加载约定的代码文件。因此，在这种机制下，不能便利的实现编译特性

• CabloyJS 是如何实现编译特性的？

EggJS 作为企业级框架提供了足够灵活的机制，比如，允许 上层框架 提供自定义的 加载器 。 CabloyJS 就是基于 EggJS 的这种机制实现了一套自定义的加载器

在 CabloyJS 中，模块当中的代码文件都是通过 require 的方式 显式 组织并加载的。这种加载机制为模块内部的源码文件提供了清晰的调用依赖关系，因此我们就可以采用 Webpack 完成编译打包，以及丑化代码的工作

模块编译的意义

1. 模块复用、构建生态 ：模块可单独编译，从而可以单独发布、单独部署，单独升级，从而促进CabloyJS整个生态圈的繁荣，进一步加速实际业务的开发
2. 知识产权 ：模块可单独编译，也可以满足 保护商业代码 的需求

如何编译模块

# 进入模块所在目录

$ cd /path/to/module

# 编译模块前端代码

$ npm run build:front

# 编译模块后端代码

$ npm run build:backend

编译参数

所有模块均采用缺省的编译参数，当然也可以提供自定义的编译参数，以模块 test-party 为例：

src/module/test-party/build/config.js

module.exports = {

  front: {

    productionSourceMap: false,

    uglify: true,

  },

  backend: {

    productionSourceMap: false,

    uglify: true,

  },

};

名称	说明
productionSourceMap	是否生成 SourceMap 文件
uglify	是否 uglify 代码

模块加载约定

在模块目录下，既有 src 源代码文件，也有 dist 打包文件。那么什么时候加载 src ，什么时候加载 dist 呢？

模块有两类： 全局模块 和 局部模块 。这两类模块有不同的加载约定：

1. 全局模块 ：位于项目的 node_modules 目录中，系统总是加载 全局模块 的 dist 打包文件
2. 局部模块 ：位于项目的 src/module 目录中，系统优先查找 src 目录并加载模块源码，如果没有找到则加载 局部模块 的 dist 打包文件

理解了 全局模块 与 局部模块 的代码加载约定，在将项目部署在生产环境时有利于做出正确的配置（主要的诉求就是：如何保护 商业代码 ）

最佳实践（模块前端）

在部署时，项目前端总是要进行 整体编译 ，把所有 全局模块 和 局部模块 的前端源码和前端资源都打包，然后输出到项目的 dist 目录

如果模块作为 局部模块 而存在，则不需要考虑模块前端的编译环节

如果模块要发布为 全局模块 ，则必须先进行模块前端的编译

最佳实践（模块后端）

1. 不进行模块编译

如果没有 保护商业代码 的需求，那么就不用考虑模块编译的环节。在部署时，直接作为 局部模块 加载源码运行即可

2. 进行模块编译

如果要进行模块编译，那么在部署时有两个选择：

• 作为局部模块
  1. 模块仍然位于项目的 src/module 目录
  2. 将模块编译后，在生产环境删除模块的 src 源码目录即可
• 作为全局模块
  1. 将模块编译后，发布至公司的私有仓库
  2. 在项目中将模块作为 全局模块 安装至 node_modules 目录
  3. 如果没有私有仓库，也可以采用 npm link 机制安装为 全局模块

模块发布

当项目中的模块代码稳定后，可以将模块公开发布，贡献到开源社区。也可以在公司内部建立npm私有仓库，然后把模块发布到私有仓库，形成公司资产，便于重复使用

$ cd /path/to/module

$ npm run build:front

$ npm run build:backend

$ npm publish

由于发布到npm仓库的模块将作为 全局模块 来使用，因此需要先编译模块的前端和后端

效果图（模块后端编译）

编译之前的源码结构

编译之后的输出文件

相关链接

• 官网: https://cabloy.com/
• GitHub: https://github.com/zhennann/cabloy