Globalize and cldr with requirejs

I am trying to Globalize. Below is my project configuration at present:

  • At present I am not using the node environment, specifically not using either of npm or bower, rather using NuGet as package manager.
  • Module system: AMD
  • On application startup, using require.js .config() to specify the paths to different external modules.
  • In the actual application (type)scripts, using, import {...} from "..."; to load the dependencies

Just wondering if there is a way to use Globalize and cldr in my project, avoiding npm and bower?

EDIT

So this is how I did it in the end:

  1. my require js config:

    require.config({
        baseUrl: baseUrl,
        paths: {
            /*requirejs plugins*/
            'json': baseUrl + "/Scripts/requirejs-plugins/json",
            'text': baseUrl + "/Scripts/text",
    
            /*CLDR and Globalize*/
            'cldr': baseUrl + "/Scripts/cldr",
            'cldr/event': baseUrl + "/Scripts/cldr/event",
            'cldr/supplemental': baseUrl + "/Scripts/cldr/supplemental",
            'cldr/unresolved': baseUrl + "/Scripts/cldr/unresolved",
            'cldr-data': baseUrl + "/Content/cldr-data",
            'Globalize': baseUrl + "/Scripts/globalize",
            'Globalize.number': baseUrl + "/Scripts/globalize/number",
            'Globalize.date': baseUrl + "/Scripts/globalize/date"
        },
        shim: {       
            'cldr': { exports: "cldr" },
            'cldr/event': { deps: ["cldr"] },
            'cldr/supplement': { deps: ["cldr"] },
            'cldr/unresolved': { deps: ["cldr"] },
            'Globalize': {
                deps: [
                    "cldr",
                    "json!cldr-data/supplemental/likelySubtags.json",
                    "json!cldr-data/main/en/numbers.json",
                    "json!cldr-data/main/en/ca-gregorian.json"
                ], exports: "Globalize"
            },
            'Globalize.number': {
                deps: [
                    "cldr",
                    "Globalize",
                    "cldr/event",
                    "cldr/supplemental"
                ]
            },
            'Globalize.date': {
                deps: [
                    "cldr",
                    "Globalize",
                    "Globalize.number",
                    "cldr/event",
                    "cldr/supplemental"
                ]
            }
        }
    });
    
    require(["cldr", "Globalize", "Globalize.number", "Globalize.date"],         function() { 
    });
    
  2. Obviously I also need to change the number.js and date.js as follows:

    number.js:

    ...// AMD
    define([
        "cldr",
        //"../globalize",
        "Globalize",
        "cldr/event",
        "cldr/supplemental"
    ], factory );...
    

    date.js:

    ...// AMD
    define([
        "cldr",
        /*"../globalize",
        "./number",*/
        "Globalize",
        "Globalize.number",
        "cldr/event",
        "cldr/supplemental"
    ], factory );...
    
  3. And finally used it like:

    const Globalize = require("Globalize");
    //Following dependencies can also be loaded by seperate http call to server, such as $.ajax
    const likelySubtags = require("json!cldr-data/supplemental/likelySubtags.json");
    const enNumbers = require("json!cldr-data/main/en/numbers.json");
    const enGregorianCal = require("json!cldr-data/main/en/ca-gregorian.json");
    ...
    Globalize.load(likelySubtags);
    Globalize.load(enNumbers);
    Globalize.load(enGregorianCal);
    
    var globEn = Globalize("en");
    
    var numFormatter = globEn.numberFormatter({ maximumFractionDigits:2});
    console.log(".numberFormatter()(Math.PI)->", numFormatter(Math.PI));
    
    var dateFormatter = globEn.dateFormatter({ skeleton: "GyMMMdhms" });
    console.log("dateFormatter(new Date())->", dateFormatter(new Date()));
    

Still like to hear from you on this :)

Answers


You could use the map from requirejs so you don't have to modify "number.js" and "date.js" in step 2:

require.config({
    [..]
    map : {
        "*" : {
            "../globalize" : "Globalize",
            "number" : "Globalize.number"
        }
    },
    [..]
});

When you want to define Globalize and load all dependencies only when you need to, you could do something like this:

define("GlobalizeCLDR", [
    "Globalize.date",
    "Globalize.number",
    "json!cldr-data/supplemental/likelySubtags.json",
    "json!cldr-data/main/en/numbers.json",
    "json!cldr-data/main/en/ca-gregorian.json",
    ], function(GlobalizeDate, GlobalizeNumber, likelySubtags, enNumbers, enGregorianCal) {
        // GlobalizeDate = GlobalizeNumber
        GlobalizeDate.load(likelySubtags);
        GlobalizeDate.load(enNumbers);
        GlobalizeDate.load(enGregorianCal);
        GlobalizeDate.locale("en");
        return GlobalizeDate;
    });

// Use it some where later
require([
    "GlobalizeCLDR"
    ], function(Globalize) {
        console.log(Globalize.formatNumber(Math.PI));
        console.log(Globalize.formatDate(new Date()));
});

require.config({
	baseUrl: "",
	paths: {
		/*requirejs plugins*/
		'json': "https://cdnjs.cloudflare.com/ajax/libs/requirejs-plugins/1.0.3/json",
		'text': "https://cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text",

		/*CLDR and Globalize*/
		'cldr': "https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.1/cldr.min",
		'cldr/event': "https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.1/cldr/event.min",
		'cldr/supplemental': "https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.1/cldr/supplemental.min",
		'cldr/unresolved': "https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.1/cldr/unresolved.min",

		'Globalize': "https://cdnjs.cloudflare.com/ajax/libs/globalize/1.4.2/globalize.min",
		'Globalize.number': "https://cdnjs.cloudflare.com/ajax/libs/globalize/1.4.2/globalize/number.min",
		'Globalize.date': "https://cdnjs.cloudflare.com/ajax/libs/globalize/1.4.2/globalize/date.min"
	},
	map : {
		"*" : {
			"../globalize" : "Globalize",
			"number" : "Globalize.number"
		}
	},
	shim: {       
		'cldr/event': {
			deps: ["cldr"]
		},
		'cldr/supplement': {
			deps: ["cldr"]
		},
		'cldr/unresolved': {
			deps: ["cldr"]
		},
		'Globalize': {
			deps: [
				"cldr",
			], exports: "Globalize"
		},
		'Globalize.number': {
			deps: [
				"Globalize",
				"cldr/event",
				"cldr/supplemental"
			]
		},
		'Globalize.date': {
			deps: [
				"Globalize.number",
			]
		},
		'json' : {
			deps: [
				"text"
			]
		}
	}
});

define("GlobalizeCLDR", [
	"Globalize.date",
	"Globalize.number",
	"json!https://raw.githubusercontent.com/unicode-cldr/cldr-core/master/supplemental/likelySubtags.json",
	"json!https://raw.githubusercontent.com/unicode-cldr/cldr-numbers-full/master/main/en/numbers.json",
	"json!https://raw.githubusercontent.com/unicode-cldr/cldr-dates-full/master/main/en/ca-gregorian.json",
	], function(GlobalizeDate, GlobalizeNumber, likelySubtags, enNumbers, enGregorianCal) {
		// GlobalizeDate = GlobalizeNumber
		GlobalizeDate.load(likelySubtags);
		GlobalizeDate.load(enNumbers);
		GlobalizeDate.load(enGregorianCal);
		GlobalizeDate.locale("en");
		return GlobalizeDate;
	});

function insertData() {
  require([
    "GlobalizeCLDR"
    ], function(Globalize) {
    document.getElementById('result').innerHTML = Globalize.formatNumber(Math.PI)
    	+ '<br>'
      + Globalize.formatDate(new Date(), { skeleton: "GyMMMEdhms" });
  });
}
document.getElementById("btn").addEventListener('click', insertData);
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
<button id="btn">Load Globalize & show result</button>
<h2>Result:</h2>
<div id="result"></div>

Need Your Help

How to find with javascript if element exists in DOM or it's virtual (has been just created by createElement)

javascript virtual document element exists

I'm looking for a way to find if element referenced in javascript has been inserted in the document.

jquery .val returning the text of the option rather than the contents of the value tag

jquery arrays multi-select

I can't understand what is going wrong and I've tried everything I can think of. Basically I have a multiple select list and I'm trying to get the selected options text values in one array, and the