3

我正在尝试全球化。以下是我目前的项目配置:

  • 目前我没有使用 node 环境,特别是没有使用 npm 或 bower,而是使用 NuGet 作为包管理器。
  • 模组系统:AMD
  • 在应用程序启动时,require.js .config()用于指定不同外部模块的路径。
  • 在实际的应用程序(类型)脚本中,使用,import {...} from "...";来加载依赖项

只是想知道是否有一种方法可以在我的项目中使用Globalizecldr避免 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.jsanddate.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()));
    

仍然希望收到您的来信:)

4

1 回答 1

0

您可以使用 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>

于 2019-05-05T13:10:32.867 回答