Web App 插件

此教程将引导您创建一个基本的Steedos Web插件。

创建插件

创建并跳转到webapp文件夹。

mkdir webapp
cd webapp

初始化插件

创建一个 package.json 文件

yarn init

安装依赖包

yarn add --dev  @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli
yarn add react

配置 webpack

创建一个 /webpack.config.js文件，配置webpack

var path = require('path');

module.exports = {
    entry: [
        './src/index.jsx',
    ],
    resolve: {
        modules: [
            'src',
            'node_modules',
        ],
        extensions: ['*', '.js', '.jsx'],
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react',
                            [
                                "@babel/preset-env",
                                {
                                    "modules": "commonjs",
                                    "targets": {
                                        "node": "current"
                                    }
                                }
                            ]
                        ],
                    },
                },
            },
        ],
    },
    externals: {
        react: 'React',
    },
    output: {
        path: path.join(__dirname, '/dist'),
        publicPath: '/',
        filename: 'main.js',
    },
};

注意 react 被指定为外部包. 这样你可以在本地测试代码 (e.g. with jest and snapshots) ，但是必不会影响到 Steedos 打包的react版本。

创建入口文件

mkdir webapp
touch webapp/index.jsx

编辑 src/index.jsx，写入以下内容:

import React from 'react';

// Courtesy of https://feathericons.com/
const Icon = () => <i className='icon fa fa-plug'/>;

class HelloWorldPlugin {
    initialize(registry, store) {
        registry.registerChannelHeaderButtonAction(
            // icon - JSX element to use as the button's icon
            <Icon />,
            // action - a function called when the button is clicked, passed the channel and channel member as arguments
            // null,
            () => {
                alert("Hello World!");
            },
            // dropdown_text - string or JSX element shown for the dropdown button description
            "Hello World",
        );
    }
}

window.registerPlugin('com.steedos.plugin-hello-world', new HelloWorldPlugin());

打包 Webapp

生成打包文件，以便安装到项目中。

yarn webpack --mode=production

编写配置文件

创建插件配置文件 plugin.config.yml

webapp:
  main: webapp/dist/main.js

插件测试

重新启动 Steedos服务，测试插件效果。