3

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 :)

Sayan Pal
  • 4,768
  • 5
  • 43
  • 82

1 Answers1

0

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>
Vincent
  • 1