使用webpack编译单个marko组件

Question

如何使用webpack或marko-cli编译单个marko.js组件，以便可以从npm注册表中将其用作npm模块？

该组件作为集成组件在我的项目中运行良好，但是当我将其作为npm模块安装时，由于未编译该组件，会出现类似“ class {is not allowed”的错误。

使用webpack编译不起作用，是说我找不到marko运行时实用程序，并且marko-cli编译的文件不能用作组件。

Webpack配置

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// Get node environment
const { NODE_ENV } = process.env
const isDev = NODE_ENV === 'development'
const env = isDev ? 'development' : 'production'

// Define webpack config
module.exports = {
    mode: env,
    entry: {
        app: ['./client.js'] // I have tried ./component/index.marko also
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.marko']
    },
    module: {
        rules: [
            {
                test: /\.marko?$/,
                loader: '@marko/webpack/loader'
            },
            {
                test: /\.(sass|scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.svg/,
                loader: 'svg-url-loader'
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ]
}

Marko组件

-- Hello World!

client.js

require('./component/index.marko')
require('marko/components').init()