如何將 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() {
    ...
}