如何将 webpack 捆绑的函数导出到全局

Question

我有一个 webpack 捆绑的 TypeScript 文件，它导出一个我需要从全局使用的函数，例如：

// bundled.ts
import * as Excel from 'exceljs';
import { saveAs } from 'file-saver';

declare const $find: any;

export function configExport() {
    $('#ExportToExcelBtn').click( async () => {
        ...
        let dataItems = $find('ViewGrid').get_masterTableView().get_dataItems();
        ...
    });
}

// notBundled.js
configExport(); // does not exist in global window object

我一定没有正确阅读文档或其他内容，但是我无法将configExport函数暴露/导出/提供/无论什么都显示到window 。 我已经研究了export-loader 、 expose-loader和ProvidePlugin ，但我并不清楚我应该在这里做什么。

到目前为止，我已经在我的 webpack.config.js 中尝试过这样的事情：

    module: {
        rules: [
            {
                test: require.resolve("./Module/js/dist/bundled.js"),
                use: [{
                    loader: "expose-loader",
                    options: "bundledModuleCode",
                }]
            },

但是configExport和bundledModuleCode都没有像我想要的bundledModuleCode出现在window 。

1. 甚至支持这个用例吗？
2. 我该怎么做？

Answer 1

我最终采用了一种类似于这里的方法： 如何在 TypeScript 中在 `window` 上显式设置新属性？

// bundled.ts
import * as Excel from 'exceljs';
import { saveAs } from 'file-saver';

declare const $find: any;

// type configExport as window property
declare global {
    interface Window {
        configExport: any;
    }
}

// add configExport to window global
window.configExport = function() {
    ...
}