2

如何使用 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'
        })
    ]
}

马尔科组件

-- Hello World!

客户端.js

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

0 回答 0