Making a Plugin

Here, we will create a new plugin module test-cmspluginhello, and popup a prompt Hello world when the page is loaded

1. Create a new plugin module

Go to the project directory and create a new module by executing the scaffold:

1$ cd /path/to/project
2$ npm run cli :create:module test-cmspluginhello -- --template=module 

2. Modify package.json

test-cmspluginhello/package.json

1{
2  "name": "egg-born-module-test-cmspluginhello",
3  "version": "1.0.0",
4  "title": "cms:plugin:hello",
5  "eggBornModule": {
6    "cms": {
7      "name": "hello",
8      "plugin": true
9    },
10  },
11  ...
12}

Name	Description
name	must follow the naming convention of the EggBornJS module: egg-born-module-{providerId}-{moduleName}
cms
cms.name	plugin’s name
cms.plugin	indicate this module is a plugin

3. Configuration

The plugin module can provide custom parameters

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

1module.exports = appInfo => {
2  const config = {};
3
4  // plugin
5  config.plugin = {
6    _message: 'Hello World',
7  };
8
9  return config;
10};

4. include.ejs

Add an auto-include template file

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

1<%
2  // js:init
3  js('./init.js.ejs');
4%>

5. plugin/init.js.ejs

Popup a prompt Hello world when the page is loaded

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

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

6. Other source code and resources

Add other source code and resources as needed, be omitted

7. Backend APIs, Frontend Vue Components

It needs to be emphasized again that the plugin module is also the EggBornJS module in essence, so you can develop backend APIs and frontend vue components like general business modules, so as to provide richer features

8. Publish Module

You can publish the module to Cabloy Store

1$ cd /path/to/project
2$ npm run cli :store:publish test-cmspluginhello