Develop Reference

Creating global variables in React/ Webpack

I have an external library that I need to load in and be able to reference in my app. The library is not available on NPM so I can't just import it at the top of my app like I have done for my other plugins. After searching around for the best workaround for this it seems that creating a global variable in webpack is the best way to access this library however the limited documentation i've found online isn't very clear. Here's what i've done:
In my webpack.config file i've added the following line in:
new webpack.ProvidePlugin({
MarketingCloud: "../src/scripts/marketing-cloud-javascript-sdk/marketing_cloud",
}),
My understanding is that the line above would give me access to the function in this script because it is now defined as a global variable but when I try and include in one of my components onclick functions I get a MarketingCloud is not defined error message. if I change this to window.MarketingCloud it renders out the page but the onclick function gives me the sane bit defined error.
Im using the create-react-app boilerplate which uses webpack/ babel. If it helps, here are the contents of the file i'm trying to add, the import jquery at the top was added by me to remove some jquery is not defined errors:
import {$, jQuery} from 'jquery';
(function($) {
window.MarketingCloud = {
env: {},
wsse: new Wsse(),
/** Make the api request */
/* callback should follow standard jQuery request format:
* function callback(data)
*/
makeRequest: function (username, secret, method, params, endpoint, callback)
{
var headers = MarketingCloud.wsse.generateAuth(username, secret);
var url = 'https://'+endpoint+'/admin/1.4/rest/?method='+method;
$.ajax(url, {
type:'POST',
data: params,
complete: callback,
dataType: "json",
headers: {
'X-WSSE': headers['X-WSSE']
}
});
}
};
})(jQuery);
Any help is much appreciated!

Don't try to attach it to the window object - export default MarketingCloud instead. To quote the Webpack docs (emphasis mine):
Automatically loads modules. Whenever the identifier is encountered as free variable in a module, the module is loaded automatically and the identifier is filled with the exports of the loaded module (of property in order to support named exports).

How to access a angular `value` outside the module?

config.js
angular.module("steam")
.value("config", {
baseurl: "http://dev-back1.techgrind.asia/"
});
I have to access the value outside the module by replacing the "http://dev .." with config.baseurl
test.js
var frisby = require("frisby");
frisby.create("Status test")
.get("http://dev-back1.techgrind.asia/scripts/rest.pike?request=test")
.expectStatus(200)
.toss();

You might reach outside the module like these. But in my opinion use .constant instead of .value for constant rest endpoints etc.
var config = angular.injector(["ng", "module"]).get("config");

how to access an array from a config.js file into a main.js file?

I have this array
var urls = {
};
in config file. How can i access this in my main.js file?
I tried normal method, making this array global in config file, but its not happening.

Ensure that config.js is loaded before main.js and you'll be fine, as long as you're declaring urls in the global scope.

Make sure the script containing the relevant code is included into your html and it is included before you try to use that variable. Also, make sure that your variable is outside of any functions or accessible through a prototype.

It looks like you're exporting the config as a module — are you using RequireJS or another dependency library to load this? Some more context with the code would also be helpful.
edit:
I think the issue is that you're exporting only the urls in your config file. I'm not sure what your app structure looks like, but something like this is closer to what you're looking for:
// config.js
var config = {
urls: {}
};
module.exports = config;
// main.js
var config = require('config');
var urls = config.urls;

Dynamically load require.js modules under mixed base urls

We have an app using require.js, that at the same time allows extensions, and these extensions' js gets served from a different path. So in our config we have:
var require = {
baseUrl : '/app/js/modules/'
}
But the extension is served from /extension/foo-extension/js/modules/.
Also, extensions are dynamic to the point that they inject some html into the page that uses a data-module="foo/bar" which we pick up on to load that module.
Ideally we'd be able to pass / set a context for require.js that scoped the following module loads to be within baseUrl /extension/foo-extension/js/modules/. As far as I can tell we would need to do require('/extension/foo-extension/js/modules/foo/bar') to load foo/bar from foo-extension.
Here is some pseudo code to imagine where we need to handle setting the path / context:
define(['some-dep'], function(SomeDep) {
$.get('somepage', function(html) {
var extension = html.data('extension'); // "foo/bar"
var extensionBase = html.data('extensionBase'); // extension/foo-extension/js/modules/
// This is where we need to readjust require to use the base path for any foo module
});
});
Is there another solution to this part from going the absolute path route?

requirejs.config() can be called later, at any time, and the loader will merge the configs together. So it should be enough to wait until you know what you want to use for the paths config for 'extension', then set it via another requirejs.config() call, then do the loading of the extension with that path.

It sounds like you'd want to use the "paths" configuration option. Example:
var require = {
baseUrl : '/app/js/modules',
paths : {
'extension' : '/extension/foo-extension/js/modules'
}
};
Then you could simply call require('extension/foo/bar') to load /app/js/modules/extension/foo-extension/js/modules/foo/bar.js

requireJS use require to load text

I'm using backbone with requireJS and I have several template files, I would like to use require() to load the templates without passing it in the module definition, for instance inside a login function in the view, I'd want to do somethign like
var html = require( ['text!templates/users/login_form.html'] );

Did you download the RequireJS text plugin? You need to download it and it put it your project before RequireJS can use text resources as dependencies. You can read about it here on the project page and also in their API documentation.

Yes you can!
loginTemplate = require(['text!templates/users/login_form.html'],
function(Template) {
return Template;
});
this should help you :-)

You can do that asking for "require" as a dependency in the module definition
define(["require", "other_dependencies"], function(require, etc) {
var template = require('text!templates/users/login_form.html');
});