全局化和cldr with requirejs

Question

我正在努力全球化 。 以下是我目前的項目配置：

• 目前我沒有使用節點環境，特別是沒有使用npm或bower，而是使用NuGet作為包管理器。
• 模塊系統：AMD
• 在應用程序啟動時，使用require.js .config()指定到不同外部模塊的路徑。
• 在實際的應用程序（類型）腳本中，使用， import {...} from "..."; 加載依賴項

只是想知道是否有辦法在我的項目中使用Globalize和cldr ，避免使用npm和bower？

編輯

所以這就是我最終做到的方式：

1. 我需要js配置：

    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. 顯然我還需要更改number.js和date.js ，如下所示：

   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. 最后用它像：

    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())); 

還是想聽聽你的意見:)

Answer 1

您可以使用requirejs中的映射 ，因此您不必在步驟2中修改“number.js”和“date.js”：

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

---

當您想要定義Globalize並僅在需要時加載所有依賴項時，您可以執行以下操作：

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>