Webpack/electron require dynamic module - node.js

I'd like to require a module on a folder, as a plugin. So I want the user to be able to add JavaScript files into an already compiled electron/webpack application and having my application load and execute it. So it would be like a plugin system. I have tried requiring every file inside the plugins/ folder but it turns out that it just gets bundled into bundle.js when compiled, and I want to be able to change it after compiled, like a plugin. How can I accomplish this?

I think what you're looking for is global.require as stated in this similar question.
Note that as it's Node's require, it will cache required module, so modifying a plugin's code will not have effect until you restart your electron application so that it does call global.require again. If that is an issue, you can force-reload a specific module with this (unrecommended) snippet:
delete global.require.cache[global.require.resolve(moduleName)]

Related

How to deal with node_modules in PhpStorm

I have been setting up my development environment for my Laravel/AngularJS project. My IDE is JetBrains PhpStorm. I am wondering what are the best practices for configuring the IDE to deal with the node_modules (or bower_components or vendor for my PHP) folder, so that:
It is not included in the code inspection as far as the modules' internal code is concerned.
It is included in the code inspection as far as references in my own code to the modules is concerned.
It is included in Autocomplete or Code Navigation (Ctrl+click on methods)
To make it more clear: I want to be able to Ctrl+click on methods of my node modules and be redirected to the source code of these modules. I also want to be warned if I write a node module method wrong, or if it does not exist. Also autocomplete a method, when I press Ctrl+Space. But I don't want the internal code of my node modules to be included in code inspection, because it takes a lot of time to inspect all the modules, and they are supposed to be ok, so I don't need to inspect them.
I already tried two solutions:
Marking the folders as excluded: This does not work because the folders are totally excluded from the project and redirection and inspection does not work at all
Creating a specific Scope (in PhpStorm Settings), that includes all files except the node_modules folder, to use when I manually run Code Inspection: It is impossible to exclude the node_modules folder, because my IDE recognizes it as a module "I think" (it has [webapp] next to it in the Project explorer). I could however exclude bower_components and vendor.
Regardless my tries, what is the best way to deal with it?
As it's mentioned in help, PhpStorm auto-excludes node_modules folder from indexing for better performance, adding the direct dependencies listed in package.json to javascript libraries for completion, etc. So the best way to handle node_modules is relying on the IDE default procedures

Can I refresh `node_modules` without restarting my nodejs application?

Is that possible to refresh some dependencies when a node.js application is running ?
For instance, I'm using a specific version of lodash, a new version is released, can I trigger the refresh directly from my app, or I'll add necessariliy to edit package.json and rebuild the app manually?
Just to get a few facts straight:
Once a module is loaded, the operative code lives in memory in the JS interpreter. Changing the file on disk has no affect at all.
Once a module is loaded and other modules have a reference to it, there is no systematic way to replace that module reference with a new one. You could conceivably delete the prior module from the module cache, load a new module, get a new module handle and manually tell every piece of code that was using the prior module that they should switch over to using the new module handle, but that's a lot of custom code and there are likely some caveats to making that work properly in some circumstances.
node.js does not have any built-in way to replace code with a new version of the code.
The usual way to "upgrade" your code is to replace the code with the updated code and then restart your app so it will load the new version of the code.
Is that possible to refresh some dependencies when a node.js application is running ?
So, it is technically feasible to manually delete a module from the module cache, then manually load an update version of the module and then manually tell everyone who was using the old module handle that they should switch over to the new module handle. But, this all assumes that there's no state in the original module that needs to be preserved and assumes that you have some way of giving every user of the module a new module handle. It's a big hand coded project with a lot of limitations (e.g. only works in very limited circumstances).
For instance, I'm using a specific version of lodash, a new version is released, can I trigger the refresh directly from my app or I'll add necessariliy to edit package.json and rebuild the app manually?
Replace code with updated code, restart your app. That's the usual way.

using requirejs without main file nor config()

I'm building an app that will contain many js (jquery) modules (files) using the following setup;
The build is run using Grunt task runner.
I use handlebars templates, then generate the html from *.hbs files.
During the build, I uglify all the js files into one minified file.
I call the minified file in my application <script src="assets/js/app.min.js"></script>
Now, I want to use requirejs to organize my code and adhere to the AMD specifications..
But I got 3 problems with this approach:
I need to have 1 single minified file for all the js; this keeps my code harder to "decode" thus to copy (since it is mixed with other dependencies; jquery, modernizer..) and also helps avoid extra http requests if scripts are called individually.. However, requirejs needs a main file to initialize the app and inside that main file It calls the other required files.. I don't have such configuration.
Many of the dependencies I'm using are in a bower package (that I don't include in the distribution); this makes it not possible to call those files using the suggested requirejs method.
I'm using jquery on this with some 3rd party plugins that don't call define(); to make them work I have to use shim config which again rises the problem #2!
So how am I supposed to take advantage of requirejs while keeping my code in modules and well organized?
Sorry for the long question and thanks for reading :)
ps: Feel free to change the title of the question as I couldn't find a better one!
I finally opted for AngularJS as it adheres to my setup above and allows me to split my app into manageable small modules.
I have also the possibility to use the ease of jQuery (even though it is not a best practice among angular community) and much more.

How to you reference a required script that is bundled?

I'm working with the Hot Towel SPA template and I'm trying to add in some data that I want to get from breeze. I have the breeze nuget package installed and the breeze script files are in the scripts folder of the site.
I can reference it by using the actual file name like the following:
define(['durandal/app', '../scripts/breeze.min.js'], function (app, breeze) {
...
});
However, this will break when my site is running in release mode and the script is actually bundled. Plus, it is really ugly and feels like a hack to put the full name in there.
What is the correct way to do this?
By default Durandal loads external libraries via normal script calls not via requirejs. Same is true for HotTowel.
e.g. https://github.com/BlueSpire/Durandal/blob/master/index.html#L31
or if your platform supports it via bundling
https://github.com/johnpapa/PluralsightSpaJumpStartFinal/blob/master/SPAJumpStart/App_Start/BundleConfig.cs#L18
Simply load breeze before requiring main.js and you should be good to go.

packaging node.js modules with more than code

I'm putting together a module I'd like to release, but am a bit stuck on how best to go about packaging it up. In addition to server side javascript, the module will need things like an admin screen, and client side javascript files. That is, it needs to serve out a fixed set of static html/css/js files. (I may have the node-static module as a dependency)
I'm curious what is the best way to handle this. I'd like to make this simple to install and integrate into apps, without forcing the user to dig through a long README. Basically they should be able to NPM the module, then add a line or two of code in the relevant place, and have it "just work". I don't want them to have to download other stuff, tell the module where to find the static files, etc.
Also, I'd like to make sure it can be included in both simple apps (i.e. one step from the standard "hello world") as well as complex apps using frameworks etc like Express, without undue hassle.
Is this possible, or is this beyond the scope of what the module system is designed to handle?
Once your package in installed with npm install mypackage -g you can use __dirname inside your executable to find the directory it's running in.
Likely /usr/local/lib/node_modules/mypackage/bin/mypackage
With your assets in /usr/local/lib/node_modules/mypackage/assets
so __dirname + '../assets' + myasset should correctly find your asset

Resources