在这里新建一个插件模块test-cmspluginhello,在页面加载完成时弹出提示Hello world

新建插件模块

插件本质上也是EggBornJS模块

进入项目目录,执行CabloyJS提供的脚手架创建一个新模块

$ cd /path/to/project
$ npm init cabloy src/module/test-cmspluginhello --type=module

如果网速慢,可以使用淘宝镜像:

$ npm init cabloy src/module/test-cmspluginhello --type=module --registry=https://registry.npm.taobao.org

修改package.json

test-cmspluginhello/package.json

{
  "name": "egg-born-module-test-cmspluginhello",
  "version": "1.0.0",
  "title": "cms:plugin:hello",
  "eggBornModule": {
    "cms": {
      "name": "hello",
      "plugin": true
    },
  },
  ...
}
  • name: 必须按照EggBorn模块的命名规范: egg-born-module-{providerId}-{moduleName}
    • providerId: 开发者Id,强烈建议采用Github的Username,从而确保贡献到社区的模块不会冲突
  • cms: CMS配置信息
    • name: 主题名称
    • plugin: 声明本模块是一个插件

配置参数

插件可以提供自定义的参数

test-cmspluginhello/backend/src/config/config.js

module.exports = appInfo => {
  const config = {};

  // plugin
  config.plugin = {
    _message: 'Hello World',
  };

  return config;
};

include.ejs

添加自动包含模版文件

test-cmspluginhello/backend/cms/plugin/include.ejs

<%
  // js:init
  js('./init.js.ejs');
%>

plugin/init.js.ejs

在页面加载完成时弹出提示Hello world

test-cmspluginhello/backend/cms/plugin/init.js.ejs

$(document).ready(function() {
  // alert
  const message='<%=site.plugins['test-cmspluginhello']._message%>';
  window.alert(message);
});

其他源码及资源

根据需要添加其他源码及资源,这里从略

后端Api路由、前端组件

需要再次强调,插件模块本质上也是EggBornJS模块,因此完全可以像一般的业务模块一样,开发后端Api路由和前端组件,从而提供更丰富的功能

构建模块

作为EggBornJS模块,如果在项目内部使用,不需要构建,可以直接使用。如果要分享到社区,供其他用户安装使用,必须进行构建

$ cd src/module/test-cmspluginhello  -- 进入模块目录
$ npm run build:front             -- 构建前端代码
$ npm run build:backend           -- 构建后端代码

发布模块

可以将制作好的模块发布到社区

$ npm publish