Question

在Webpack中，我试图找出如何使主要导出对象成为特定函数而不是包含函数的对象。我真正喜欢的是这样的：

webpack.config.js：

module.exports = {
    entry: {
        app: "./app.js",
    },
    output: {
        path: __dirname + "/dist/",
        filename: "build.js",
        library: "App"
    }
};

app.js：

export default function Constructor(x, y) { this.x = x; this.y = y; }

app.html：

...
<script src="/dist/build.js"></script>
<script>
    let x = 5; let y = 10;
    let app = new App(x, y);
</script>
...

但实际上这失败了，因为App不是一个函数。相反，它是一个具有default属性的对象，它是所需的函数。所以我可以做new App.default(x, y)，但这很难看，因为我的应用程序的功能只有一个入口点，所以感觉很不必要。

必须有一种更清洁的方法来做到这一点，但我无法弄明白，即使在所有the other types of libraryTargets中也是如此。有什么想法吗？

Answer 1

There is babel plugin for that

首先，您需要安装babel-loader，插件和依赖项

npm i --save-dev babel-loader babel-core babel-preset-env babel-plugin-add-module-exports

然后，您需要在webpack config中添加babel-loader和插件：

module.exports = {
    entry: {
        app: "./app.js",
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env'],
                        plugins: [require('babel-plugin-add-module-exports')]
                    }
                }
            }
        ]
    },
    output: {
        path: __dirname + "/dist/",
        filename: "build.js",
        library: "App"
    }
};

这适用于问题中的简单单文件应用程序。但是，babel-plugin-add-module-exports is not without issues可能与更复杂的设置不兼容。

在Webpack中，如何使root导出库成为一个函数？

1 个答案: