How do I make split-file plugins not break browser compatibility?

[CG-Tespy]

I've figured out a way to make complex plugins split into multiple files, that only require the user to install one main file in the PluginManager. Problem is, my method uses the require() function to get at the non-main files... That breaks browser compatibility.

Is there a way to keep browser compatibility without having to go over each file, turning my plugin into a monolithic one?

 

[LTN Games]

Unfortunately you can't use require in the browser, the best solution is to use a bundler tool to bundle all your files into 1 single plugin. I use a tool I made that helps with that called FeniXWizard but its for creating plugins in a specific development environment. If you want to skip the tool, you can use something like RollupJS or Webpack, my personal fave is RollupJS as it produces very clean bundles and its lightning fast.

 

[CG-Tespy]

I've looked into rollup and Webpack, and despite the tutorials, I don't get how to use them for MV plugins. All my attempts end up with barely-modified versions of the main file that imports the other files :/ How am I supposed to use them?

 

[Solar_Flare]

Short answer: yes, you can do it. Just call PluginManager.loadScript and pass the path to your subsidiary script file. The path is relative to your plugins directory.

 

[CG-Tespy]

As I mentioned, I use the require function to get to the subsidiary scripts. If I'm not mistaken, using loadScript would mean having to go through each script one by one, so that my submodules aren't assigned through the require function.

 

[nio kasgami]

As I mentioned, I use the require function to get to the subsidiary scripts. If I'm not mistaken, using loadScript would mean having to go through each script one by one, so that my submodules aren't assigned through the require function.

Sadly this isnt the fault of the loadscript but how you did your workflow.

regardless Of what u want to do u can use browsify that transform every import as a references and just bundle everything.

If you dont understand how to use those tools then its better to just change your structures.

I dont use import / requires im my project and just use gulp to concat everything

 

[Solar_Flare]

Maybe you can post a sample of your require usage? I'm not quite seeing why replacing it with loadScript would not work, but perhaps I'm missing something. At the very least I imagine you could use loadScript to somehow implement something similar to require.

 

[CG-Tespy]

regardless Of what u want to do u can use browsify that transform every import as a references and just bundle everything.

If you dont understand how to use those tools then its better to just change your structures.

It'd be more helpful to give me advice on using Rollup (or browserify, as you suggest) for MV, rather than telling me not to use it to begin with because I'm having trouble.

Maybe you can post a sample of your require usage? I'm not quite seeing why replacing it with loadScript would not work, but perhaps I'm missing something. At the very least I imagine you could use loadScript to somehow implement something similar to require.

Here.

//Main plugin
var CGT = require("./js/plugins/_CGT1.6.x/CoreEngine");

//One of the imported files in the plugin
let subnamespaces = 
{

    Audio: require("./Audio/_src"),

    Collections: require("./Collections/_src"),

    Graphics: require("./Graphics/_src"),

    //...
};

Based on my experience with loadScript, it simply executes the script without returning anything like module.exports does. Switching over to that would require a refactor of almost every file in my plugin, which would be awfully tedious.

 

[LTN Games]

I personally don't use require everywhere in my plugins, I just use import/export but it should be generally the same thing. You will need a plugin for RollupJS to bundle commonjs modules, unless you change over to import/export.

@rollup/plugin-commonjs:

rollup/plugins

The one-stop shop for official Rollup plugins. Contribute to rollup/plugins development by creating an account on GitHub.

github.com

And then I believe you will need your main.js to use import instead of require but not 100% sure on that. Hope this helps.

// Main plugin
// var CGT = require("./js/plugins/_CGT1.6.x/CoreEngine");
import './js/plugins/_CGT1.6.x/CoreEngine'

 

[Solar_Flare]

Ah, okay, I get the basic problem here.

For web-compatible loading, I believe the options are basically just PluginManager.loadScript or XHR (what DataManager.loadDataFile does, but the details would be a little different for your use case). I'm not quite sure about loadScript, but XHR is inherently asynchronous, so while I'm certain you could get something that works, it wouldn't be a simple drop-in replacement for require - you'd need to restructure your code to account for require returning the equivalent of a Promise.
Perhaps the most straightforward way to do this would be to pre-load every possible module into a table of loaded modules and defer your entire plugin initialization (or at least, anything that depends on a module) until they have all loaded, though this would mean your plugin's position in the plugin list no longer means anything (probably).

In summary: I think there exists a solution that doesn't involve a compilation step to merge the files into a single monolithic blob, but probably not without some restructuring of how you do things.

 

[CG-Tespy]

You will need a plugin for RollupJS to bundle commonjs modules, unless you change over to import/export.

@rollup/plugin-commonjs:

rollup/plugins

The one-stop shop for official Rollup plugins. Contribute to rollup/plugins development by creating an account on GitHub.

github.com

And then I believe you will need your main.js to use import instead of require but not 100% sure on that. Hope this helps.

// Main plugin
// var CGT = require("./js/plugins/_CGT1.6.x/CoreEngine");
import './js/plugins/_CGT1.6.x/CoreEngine'

I've used the rollup plugin you linked to, and while I did get better results (the bundling actually happened), the result didn't quite work. I got errors like "Cannot read property Object of undefined". I bundled using several other formats (umd, iife, etc), yet something always came up rendering my plugin unusable.

I tried changing the require to import in the main plugin like you said, but Rollup simply refused to bundle it when I did; it spat out an error about how import and export can only be at the top level.

Ah, okay, I get the basic problem here.

For web-compatible loading, I believe the options are basically just PluginManager.loadScript or XHR (what DataManager.loadDataFile does, but the details would be a little different for your use case). I'm not quite sure about loadScript, but XHR is inherently asynchronous, so while I'm certain you could get something that works, it wouldn't be a simple drop-in replacement for require - you'd need to restructure your code to account for require returning the equivalent of a Promise.
Perhaps the most straightforward way to do this would be to pre-load every possible module into a table of loaded modules and defer your entire plugin initialization (or at least, anything that depends on a module) until they have all loaded, though this would mean your plugin's position in the plugin list no longer means anything (probably).

In summary: I think there exists a solution that doesn't involve a compilation step to merge the files into a single monolithic blob, but probably not without some restructuring of how you do things.

The way I've structured my code might be the reason why Rollup's output never worked out, even when it managed to actually bundle it all together. If no bundling solution can work with my code, then I'll really have no choice but to overhaul my entire codebase... in which case, I'd best use PluginManager.loadScript to remove the need for bundling to begin with.

 

[Trihan]

@Solar_Flare, is this the thread you were talking about?