Javascript require(), how to include a simple require('something') - javascript

I need to use this library banking.js which uses modules. I have downloaded RequireJS and I have been reading for hours, but I can't seem to find any tutorial that uses simply require('Module') like how it is suggested on the github page, they all use different kind of methods that pass anonymous functions (they didn't work for me either).
I constantly get the following error:
Uncaught Error: Module name "banking" has not been loaded yet for context: _. Use require([])
I followed the documentation but nothing is working.

NodeJS projects use the CommonJS (CJS) format for modules; RequireJS is mostly used for AMD modules with a few hacks to try to make the two interoperable.
You may want to look into Browserify; it will bundle CJS modules into a browser-includeable JS file, and provides some replacements for NodeJS core modules.

Related

Uncaught ReferenceError: module is not defined at guacamole-common.min.js

We are using guacamole-common-js in one of our projects and using guacamole-common.min.js in the script results in a module not found error:
<script type="text/javascript" src="guacamole-common.min.js"></script>
I am using guacamole-common.js: 1.4.0-a
At first, I thought this might be related to guacamole-common.js version but I tried downgrading its version but still facing the same error.
The use of module.exports indicates that the file is a CommonJS module. This is the default module format of Node.js and is not supported by browsers.
Either:
You have a module designed for Node.js and not web browsers. There might be a browser targetted version available.
You have a module designed for use with a module bundling tool (such as Webpack or Parcel) and should use one of those to build your browser-side JS application.
Try carefully reading the documentation from wherever you downloaded the JS file from.

How do you build a standalone external dependency js file for a library that has been modularised?

Basically I have a number of legacy web applications that reference and use a library from a CDN (Kendo UI). I have a task to remove such requests to remote hosts and so I'd like to encorporate the library into an existing npm script task that collects all dependencies into a single local js file which the application references.
The problem I'm having is that this library does not provide pre-compiled js files that can be used immediately (unlike other libraries such as jquery or angular), but it is modularised and requires webpack or browserify to use it.
Since our legacy applications do not use the modular approach to loading dependencies, and I have no scope to rewrite them, I would like to somehow package the modularised library into an equivalent js file that will load the library so my application can access it simply via a <script> reference to it.
I have tried using browserify to compile from a source js file that contains simply a require reference to the library, but then referencing the compiled file in my application results in an error as the library's functions are not available to my application.
Can anyone point me in the right direction?
If your using some library's that are module based, and you want to use them standalone, you will need to do 2 things.
expose the module to the global scope. Maybe using the expose loader https://github.com/webpack-contrib/expose-loader or even just assign to the window object.
If the modules are also using a library that your also including standalone, you need to tell webpack about these,.
eg.
{
externals: {
jquery: 'jQuery'
}
// other stuff..
}
Finally when you include these, remember the ordering of your script tags. eg. make sure you include jquery before your bundled javascript.

How does jQuery concatenate its sources and gets rid of its AMD definitions

I see jQuery uses AMD in its sources. However in their concatenated dist file all AMD references are gone. How do they build their script, getting rid of the AMD and still keeping the source code functional?
Its using the requirejs optimizer (aka r.js) along with lots of customizations, including several regular expressions. Studying the source of the "build" grunt task will provide many more details.

How to bundle CommonJS modules into a single UMD library file?

I'm writing a JS library and organizing the code in a hierarchy of CommonJS modules connected with require calls. Then in addition there are also external dependencies (like Underscore).
How can I bundle all my library modules into a single file (CommonJS+AMD) excluding the external dependencies which should remain as require calls?
I've experimented with Browserify and came close with --standalone and --external but when using Browserify again on the application that is using this bundled library it gets confused with the remaining require calls inside the bundled lib. And when I get rid of them with something like Derequire it will also strip out the require calls to external dependencies.
I tried to figure out how other libraries approach this but they mostly seem to have some custom concatenation scripts. Is there a simpler solution? Seems like it should be a common enough use case.
Try what you're already doing with standalone and external, then when you bundle the second time pass the noParse option to browserify (e.g. browserify({noParse: ['/abs/path/to/first/bundle']})). Or you could try minifying the first bundle. See also this answer.

compiling javascript program with requirejs to remove require dependency

I have written a JavaScript app using requirejs to handle dependency injection. I have compiled the file, but I get the obvious error when including it as a script:
Uncaught ReferenceError: define is not defined
I would like my JavaScript app NOT to depend on an AMD loader if the developer decides not to use one. However, due to the complexity of the application, I would like to use it to handle my app's dependencies.
Is there a compiler available that compiles JavaScript to remove the AMD dependency? I've seen a little bit of buzz around Grunt, but haven't found any straight answers on whether or not this is a feature of Grunt.
You can't completely remove the require/define dependency, but you can replace it with a much smaller shim that doesn't introduce any significant performance penalty. See the How can I provide a library to others that does not depend on RequireJS? section of the Optimization guide:
If you are building a library for use on web pages that may not use RequireJS or an AMD loader, you can use the optimizer to combine all your modules into one file, then wrap them in a function and use an AMD API shim. This allows you to ship code that does not ship with all of RequireJS, and allows you to export any kind of API that works on a plain web page without an AMD loader.
almond is an AMD API shim that is very small, so it can be used in place of require.js when all of your modules are built into one file using the RequireJS optimizer. The wrap build config option will put a function wrapper around the code, or you can provide your own wrapper if you need to do extra logic.

Categories

Resources