I am currently working with a webpack-bundled TypeScript file that contains a function I need to access from the global scope. Here is an example of the code:
// 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
Despite my efforts, I am struggling to expose or export the configExport function to the window object. I have explored options like using export-loader, expose-loader, and ProvidePlugin, but I haven't been able to figure out the right approach.
In an attempt to solve this issue, I modified my webpack.config.js file like so:
module: {
rules: [
{
test: require.resolve("./Module/js/dist/bundled.js"),
use: [{
loader: "expose-loader",
options: "bundledModuleCode",
}]
},
Unfortunately, neither configExport nor bundledModuleCode seem to be accessible in the window as desired.
- Is this scenario even supported?
- What would be the correct approach to achieve this functionality?