CG-Tespy

Professional Persona Panderer
Veteran
Joined
Jan 5, 2019
Messages
37
Reaction score
19
First Language
Spanish
Primarily Uses
RMMV
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

Indie Studio
Veteran
Joined
Jun 25, 2015
Messages
708
Reaction score
636
First Language
English
Primarily Uses
RMMV
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

Professional Persona Panderer
Veteran
Joined
Jan 5, 2019
Messages
37
Reaction score
19
First Language
Spanish
Primarily Uses
RMMV
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

Veteran
Veteran
Joined
Jun 6, 2020
Messages
562
Reaction score
242
First Language
English
Primarily Uses
RMMV
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

Professional Persona Panderer
Veteran
Joined
Jan 5, 2019
Messages
37
Reaction score
19
First Language
Spanish
Primarily Uses
RMMV
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

VampCat
Veteran
Joined
May 21, 2013
Messages
8,965
Reaction score
3,073
First Language
French
Primarily Uses
RMMV
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

Veteran
Veteran
Joined
Jun 6, 2020
Messages
562
Reaction score
242
First Language
English
Primarily Uses
RMMV
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

Professional Persona Panderer
Veteran
Joined
Jan 5, 2019
Messages
37
Reaction score
19
First Language
Spanish
Primarily Uses
RMMV
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.


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


JavaScript:
//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

Indie Studio
Veteran
Joined
Jun 25, 2015
Messages
708
Reaction score
636
First Language
English
Primarily Uses
RMMV
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:

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.

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

Solar_Flare

Veteran
Veteran
Joined
Jun 6, 2020
Messages
562
Reaction score
242
First Language
English
Primarily Uses
RMMV
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

Professional Persona Panderer
Veteran
Joined
Jan 5, 2019
Messages
37
Reaction score
19
First Language
Spanish
Primarily Uses
RMMV
You will need a plugin for RollupJS to bundle commonjs modules, unless you change over to import/export.

@rollup/plugin-commonjs:

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.

Code:
// 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

Speedy Scripter
Veteran
Joined
Apr 12, 2012
Messages
3,344
Reaction score
2,475
First Language
English
Primarily Uses
RMMZ
@Solar_Flare, is this the thread you were talking about?
 

Latest Threads

Latest Posts

Latest Profile Posts

cst.PNG
What would you assume this thing was/is?
1623528827049.png
Ah yes. Just the reference I was looking for to use for my portrait. Thanks Google.
BCj
Made a logo for Mana Star :D
330bb1fde7bb06b13e23fefd83501163.png
it's e3 season again..!

Forum statistics

Threads
112,180
Messages
1,066,386
Members
145,769
Latest member
kyuubito31
Top