RequireJs实现i18n国际化Demo

i18n （取自英文单词 internationalization 的首末字符 i 和 n，中间 18 个字符用数字表示）是“国际化”的简称。在资讯领域，国际化(i18n)指让产品（出版物，软件，硬件等）无需做大的改变就能够适应不同的语言和地区的需要。对程序来说，在不修改内部代码的情况下，能根据不同语言及地区显示相应的界面。在全球化的时代，国际化尤为重要，因为产品的潜在用户可能来自世界的各个角落。通常与i18n相关的还有L10n（“本地化”的简称）。

`i18n.js`下载

1 2	方式一：下载地址：https: //github.com/requirejs/i18n 方式二：bower下载命令：$ bower install requirejs-i18n

目录结构(未打包)

目录结构(未打包)示意图

配制信息

build.js

({
  appDir: "../src",
  //打包目录
  baseUrl: "./js",
  //require依赖根路径
  dir: "../build",
  //打包输出路径
  optimize: "none",
  //默认是uglify压缩打包，none表示只打包不压缩
  mainConfigFile: "./config.js",
  //require配制项文件
  name: "app"
  //需要打包的主模块
});

config.js

requirejs.config(
  {
    baseUrl: "./src/js",
    //require根路径
    paths: {
      i18n: "../../lib/i18n/i18n",
      //引入i18n插件路径
      jquery: "../../lib/jquery/dist/jquery.min"
      //引入jquery路径
    },
    config: {
      i18n: {
        locale: "en"
        //配制中英文信息，zh：中文,en：英文
      }
    }
  }
);

入口文件config

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>requireJs实现i18n国际化</title>
  </head>
  <body>
    <h3>requireJs实现i18n国际化</h3>
    国际化测试如下：
    <div id="lang">
    </div>
    <script src="lib/requirejs/require.js" data-main="main.js">
    </script>
  </body>
</html>

main.js

var debug = true;
if (debug) {
  require(["./config/config", "./src/js/app"]);
} else {
  require(["./config/config", "./build/js/app"]);
}

开发目录src

js/app.js

1
2
3

require(["jquery", "i18n!./nls/messages"], function($, i18n) {
  $("#lang").text(i18n.name);
});

js/nls/messages.js

define(
  {
    en: true,
    zh: true
  }
);

js/nls/zh/messages.js

define(
  {
    name: "我是Leroi",
    age: 18,
    sex: "男"
  }
);

js/nls/en/messages.js

define(
  {
    name: "I am Leroi",
    age: 18,
    sex: "man"
  }
);

`r.js`打包项目

`r.js`安装

1	npm install -g requirejs

`r.js`打包

在根目录下执行git命令：r.js -o config/build.js

打包后得到的目录结构如下：

r.js打包示意图

如果想演示打包后的效果，还需要修改main.js 的debug 为 false。另外，无论打包前后，都可以通过config.js 的 locale 配制来调整中英文国际化配制来演示不同效果。

本文早期发布于个人 CSDN 博客：查看原文

RequireJs实现i18n国际化Demo

i18n.js下载