Complex backbone app with multiple build configurations using Browserify - javascript

I'm working on a large Backbone app that is designed to be very configurable due to being multi-tenancy and designed to run on many platforms. Currently the apps are built via Grunt and environment variables are used to determine which Backbone files are included in the finished version of the app.
At present some of the files that get included are extending or overwriting others that are included earlier.
As an example:
BaseHeader.js:
var BaseHeader = Backbone.View.extend({
// code
});
Header.js:
var Header = BaseHeader.extend({
// code
});
At the moment my finished app is built with Grunt which creates an .html file with a bunch of script tags so all the files will be loaded by the browser.
I'd like to use Browserify to bundle my JS into a single file, so now I have:
BaseHeader.js:
var Backbone = require("backbone");
var BaseHeader = Backbone.View.extend({
// code
});
module.exports = BaseHeader;
Header.js:
var Backbone = require("backbone");
var BaseHeader = require("/path/to/BaseHeader.js");
var Header = BaseHeader.extend({
// code
});
module.exports = Header;
But I'm confused as to how to work things.
The entry point for all my apps is the same App.js file which makes a require call to BaseHeader.js, it doesn't however make a require call to Header.js as this file is platform/client specific.
As Browserify simply recurses through the requires in order to find and bundle dependencies it will never pick up Header.js
So, how can I create a build task to optionally require Header.js when needed?

Your looking for the require option to browserify:
This option will include the module or file as part of the bundle even if it isn't referenced in the entry app. It should also expose the said module to your HTML page via a global require() function.
From the docs:
b.require(file, opts)
Make file available from outside the bundle with require(file).
The file param is anything that can be resolved by require.resolve().
file can also be a stream, but you should also use opts.basedir so that relative requires will be resolvable.
If file is an array, each item in file will be required. In file array form, you can use a string or object for each item. Object items should have a file property and the rest of the parameters will be used for the opts.
Use the expose property of opts to specify a custom dependency name. require('./vendor/angular/angular.js', {expose: 'angular'}) enables require('angular')

Related

Is there a way to cause the JS engine to load a .js file without explicitly importing something from it?

Maybe I'm trying to do something silly, but I've got a web application (Angular2+), and I'm trying to build it in an extensible/modular way. In particular, I've got various, well, modules for lack of a better term, that I'd like to be able to include or not, depending on what kind of deployment is desired. These modules include various functionality that is implemented via extending base classes.
To simplify things, imagine there is a GenericModuleDefinition class, and there are two modules - ModuleOne.js and ModuleTwo.js. The first defines a ModuleOneDefinitionClass and instantiate an exported instance ModuleOneDefinition, and then registers it with the ModuleRegistry. The second module does an analogous thing.
(To be clear - it registers the ModuleXXXDefinition object with the ModuleRegistry when the ModuleXXX.js file is run (e.g. because of some other .js file imports one of its exports). If it is not run, then clearly nothing gets registered - and this is the problem I'm having, as I describe below.)
The ModuleRegistry has some methods that will iterate over all the Modules and call their individual methods. In this example, there might be a method called ModuleRegistry.initAllModules(), which then calls the initModule() method on each of the registered Modules.
At startup, my application (say, in index.js) calls ModuleRegistry.initAllModules(). Obviously, because index.js imports the exported ModuleRegistry symbol, this will cause the ModuleRegistry.js code to get pulled in, but since none of the exports from either of the two Module .js files is explicitly referenced, these files will not have been pulled in, and so the ModuleOneDefinition and ModuleTwoDefinition objects will not have been instantiated and registered with the ModuleRegistry - so the call to initAllModules() will be for naught.
Obviously, I could just put meaningless references to each of these ModuleDefinition objects in my index.js, which would force them to be pulled in, so that they were registered by the time I call initAllModules(). But this requires changes to the index.js file depending on whether I want to deploy it with ModuleTwo or without. I was hoping to have the mere existence of the ModuleTwo.js be enough to cause the file to get pulled in and the resulting ModuleTwoDefinition to get registered with the ModuleRegistry.
Is there a standard way to handle this kind of situation? Am I stuck having to edit some global file (either index.js or some other file it references) so that it has information about all the included Modules so that it can then go and load them? Or is there a clever way to cause JavaScript to execute all the .js files in a directory so that merely copying the files it would be enough to get them to load at startup?
a clever way to cause xxJavaScriptxx Node.js to execute all the .js files in a directory:
var fs = require('fs') // node filesystem
var path = require('path') // node path
function hasJsExtension(item) {
return item != 'index.js' && path.extname(item) === '.js'
}
function pathHere(item) {
return path.join('.', item)
}
fs.readdir('./', function(err, list) {
if (err) return err
list.filter(hasJsExtension).map(pathHere).forEach(require) // require them all
})
Angular is pretty different, all the more if it is ng serve who checks if your app needs a module, and if so serves the corresponding js file, at any time needed, not at first load time.
In fact your situation reminds me of C++ with header files Declaration and cpp files with implementation, maybe you just need a defineAllModules function before initAllModules.
Another way could be considering finding out how to exclude those modules from ng-serve, and include them as scripts in your HTML before the others, they would so be defined (if present and so, served), and called by angular if necesary, the only cavehat is the error in the console if one script tag is not fetched, but your app will work anyway, if it supposed to do so.
But anyway, it would be declaring/defining those modules somewhere in ng-serve and also in the HTML.
In your own special case, and not willing to under-evalute ng-serve, but is the total js for your app too heavy to be served at once? (minified and all the ...), since the good-to-go solution may be one of the many tools to build and rebuild your production all.js from your dev js folder at will, or like you said, with a drag&drop in your folder.
Such tool is, again, server-side, but even if you only can push/FTP your javascript, you could use it in your prefered dev environment and just push your new version. To see a list of such tools google 'YourDevEnvironment bundle javascript'.
To do more with angular serve and append static js files under specific conditions, you should use webpack so the first option i see here is eject your webpack configuration and after that you can specify what angular should load or not.
With that said, i will give an example:
With angular cli and ng serve any external javascript files you wanna include, you have to put them inside the scripts array in the angular-cli.json file.However you can not control which file should be included and which one not.
By using webpack configuration you can specify all these thing by passing a flag from your terminal to the webpack config file and do all the process right there.
Example:
var env.commandLineParamater, plugins;
if(env.commandLineParamater == 'production'){
plugins = [
new ScriptsWebpackPlugin({
"name": "scripts",
"sourceMap": true,
"filename": "scripts.bundle.js",
"scripts": [
"D:\\Tutorial\\Angular\\demo-project\\node_moduels\\bootstrap\\dist\\bootstrap.min.js",
"D:\\Tutorial\\Angular\\demo-project\\node_moduels\\jquery\\dist\\jquery.min.js"
],
"basePath": "D:\\Tutorial\\Angular\\demo-project"
}),
]}else{
plugins = [
new ScriptsWebpackPlugin({
"name": "scripts",
"sourceMap": true,
"filename": "scripts.bundle.js",
"scripts": [
"D:\\Tutorial\\Angular\\demo-project\\node_moduels\\bootstrap\\dist\\bootstrap.min.js"
],
"basePath": "D:\\Tutorial\\Angular\\demo-project"
}),
]
}
then:
module.exports = (env) => {
"plugins": plugins,
// other webpack configuration
}
The script.js bundle will be loaded before your main app bundle and so you can control what you load when you run npm run start instead of ng-serve.
To Eject your webpack configuration, use ng eject.
Generally speaking, when you need to control some of angular ng-serve working, you should extract your own webpack config and customize it as you want.

Wepback require from variable

I am making console utility which accepts a path to configuration file as a console argument.
F.e: utility -f /path/to/file.js
I need to require this file to read configuration. Is it possible to handle this with webpack? As I understand context can not help me in this situation.
Thanks.
P.S. I'm already using webpack.
P.S Solution is to use something like: eval('require')(dynamicPath)
Webpack can only do a dynamic require like this if the file to be required is available at compile time. For example, if you require a "dynamic" file path, like
require('./assets/images/' + someVariable + '.png')
Then under the hood, Webpack will include all images matching that pattern in the bundled require code. It basically will include all files matching the regex:
/.\/assets\/images\/*.png/
I would probably try putting the config file in a specific folder, and using require on that folder:
require('./configs/' + process.env.CONFIG_NAME);
This way Webpack will only include all files in the configs folder.
The Webpack documentation is horrible but there is more information on the dynamic requires page.
If you are passing in a config file as an argument to a node process, it will be accessible in the process.argv array of command line arguments. I don't know if you are using some other framework (like the excellent commander) to help with making command line programs, but we can just slice the array to find what we need.
To resolve a path from the directory the script is launched in, you can use process.cwd() - this returns an absolute path to the working directory of the node process.
Finally you can use path.resolve(processPath, configPath) (docs) to generate a path that is always guaranteed to resolve to the config. You can then require this path.
You probably need to do this first. The top of your file could look something like this:
/* relevant require() calls for necessary modules */
var path = require('path');
// first two arguments are node process and executed file
var args = process.argv.slice(2);
var configIndex = args.findIndex('-f') + 1;
var configPath = path.resolve(process.cwd(), args[configIndex]);
var config = require(configPath);
/* the rest of your code */

Load a JS dependency from browserify bundle

I have a single page app which comprises of a JS bundle based on Browserify and Coffeescript.
In a certain usecase, I need to create an adhoc page (Detached from the SPA) which needs to access a library (Kendo to be specific), which is part of the browserified bundle and the adhoc page would have some simple JS based on kendo.
The question is how do I load/access the library outside the Single Page Application (If I try loading it, the browser says that the library is not found)?
Using RequireJS could be an option as specified here. But, I dont want to use another library just for this purpose. I think there must be a way to "require" the library without requireJS because it is already working in the Single Page Application.
Please help.. Thanks!
Browserify rewrites your module paths like ../moduleA/file.js into an internal module id like 23 when packing.
Every require statement will also be rewritten, a statement like this:
var moduleA = require('../moduleA/file.js');
Becomes this:
var moduleA = require(23);
To get access to a particular library, you can do to things:
1) find the internal id via debugger and then require the module via it (this is quite fragile, because the internal id could change with every build)
2) package another file into your bundle with the following contents:
var kendo = require('kendo');
window.kendo = kendo;
Afterwards, you can simply access kendo as a page global.

How do I package a node module with optional submodules?

I'm writing a javascript library that contains a core module and several
optional submodules which extend the core module. My target is the browser
environment (using Browserify), where I expect a user of my module will only
want to use some of my optional submodules and not have to download the rest to
the client--much like custom builds work in lodash.
The way I imagine this working:
// Require the core library
var Tasks = require('mymodule');
// We need yaks
require('mymodule/yaks');
// We need razors
require('mymodule/razors');
var tasks = new Tasks(); // Core mymodule functionality
var yak = tasks.find_yak(); // Provided by mymodule/yaks
tasks.shave(yak); // Provided by mymodule/razors
Now, imagine that the mymodule/* namespace has tens of these submodules. The
user of the mymodule library only needs to incur the bandwidth cost of the
submodules that she uses, but there's no need for an offline build process like
lodash uses: a tool like Browserify solves the dependency graph for us and
only includes the required code.
Is it possible to package something this way using Node/npm? Am I delusional?
Update: An answer over here seems to suggest that this is possible, but I can't figure out from the npm documentation how to actually structure the files and package.json.
Say that I have these files:
./lib/mymodule.js
./lib/yaks.js
./lib/razors.js
./lib/sharks.js
./lib/jets.js
In my package.json, I'll have:
"main": "./lib/mymodule.js"
But how will node know about the other files under ./lib/?
It's simpler than it seems -- when you require a package by it's name, it gets the "main" file. So require('mymodule') returns "./lib/mymodule.js" (per your package.json "main" prop). To require optional submodules directly, simply require them via their file path.
So to get the yaks submodule: require('mymodule/lib/yaks'). If you wanted to do require('mymodule/yaks') you would need to either change your file structure to match that (move yaks.js to the root folder) or do something tricky where there's a yaks.js at the root and it just does something like: module.exports = require('./lib/yaks');.
Good luck with this yak lib. Sounds hairy :)

Where to change objects prototypes in node.js?

I want to add or override some standard methods of Object, Function and Array (e.g., like suggested in this answer) in node.js application. How should I do all the "patches" in just one module so that it affects all my other modules?
Will it be enough if I do it in a module that is just require'd or it won't work because the two modules have different global namespaces so they have different Object?... Or should I run some initialisation function after require that makes all these "patches" working in this module too?
//require the util.js file
require('./util.js');
var a = [];
a.doSomething();
in your "util.js" file:
//in your util.js file you don't have to write a module, just write your code...
Array.prototype.doSomething = function(){console.log("doSomething")};
Each file loaded shares the same primordial objects like Object, Array, etc, unless run in a different vm Context, so requiring the file once in your initialization will make the changes everywhere.

Categories