Как бы вы связали компонент Preact с browserify?

Question

Я действительно изо всех сил пытаюсь понять это. Может быть, я должен сдаться и попытаться изучить веб-пакет вместо этого, но я собираюсь опубликовать здесь сначала. Я хочу взять один компонент Preact и связать его с Preact для использования в форме в качестве независимого компонента (а не приложения).

Шаблоны и шаблоны Preact от Preact-cli слишком жесткие для моих текущих потребностей.

Я закончил тем, что использовал React, потому что гораздо проще понять, как его объединить. Вот мой Gruntfile, который делает связывание.

module.exports = function(grunt) {
    require('load-grunt-tasks')(grunt);

    const taskConfig = {
        browserify: {
            dev: {
                options: {
                    transform: [['babelify', {presets: ['env', 'react']}]],
                },
                src: [my-react-component.js],
                dest: my-bundle.js
            }
        }
    };

    grunt.initConfig(taskConfig);

    grunt.registerTask('default', [
        'browserify'
    ])
};

Теперь, как мне сделать то же самое, кроме использования Preact вместо этого?

Давайте пока предположим, что мой компонент - это простой Hello World.

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
    render() {
        return (
            <h1>
                Hello World
            </h1>
        );
    }
}

document.addEventListener('DOMContentLoaded', function() {
    ReactDOM.render(<MyComponent />, document.querySelector('#test'));
});