使用 SystemJS 加载 moment.js

Created: November-22, 2018

SystemJS 允许编写和使用依赖于 ECMAScript 6 导入和导出语句的模块化 javacsript 代码。一个很好的例子是 moment.js 库，它自从 2.10.0 发布的 moment.js 开始在 npm 上发布 ECMAScript 6 源代码。

安装先决条件

npm install moment
npm install systemjs
npm install traceur

注意：SystemJS 需要一个转换器来将 ECMAScript 6 javacsript 编译成可以在当前版本的浏览器和 node.js 中运行的代码，这些代码当前都不支持 ECMAScript 6 模块。当前版本的 SystemJS 默认使用并需要 traceur，因此我们需要安装它，但 SystemJS 可以配置为使用 traceur，babel 或 typescript（在某些插件的帮助下）。

添加示例代码

创建文件 test.js：

import moment from 'moment';

export function test() {
    const m1 = moment().format('LLL');
    const m2 = moment().fromNow();
    return `The moment is ${m1}, which was ${m2}`;
}

这是一个非常简单的 javascript 模块，它还表明除了 import 和 export 之外你还可以使用其他新的 ECMAScript 6 功能。

在 node.js 中运行它

创建文件 main.js

var SystemJS = require('systemjs');

SystemJS.config({
    map: {
        'traceur': 'node_modules/traceur/bin/traceur.js',
        'moment': 'node_modules/moment/src'
    },
    packages: {
        'moment': {
            main: 'moment.js'
        }
    }
});

SystemJS.import('./test.js')
    .then(function(test) {
        var t = test.test();
        console.log(t);
    })
    .catch(function(e) {
        console.error(e)
    });

这个文件使用 SystemJS.import 加载我们的 test.js 文件并从中执行 test() 函数，而不是普通的 require。必须使用 SystemJS.config() 配置 SystemJS，以便找到 traceur 和 moment 模块的源代码。map 中 moment 的路径指向 moment/src 目录，其中 ECMAScript 6 版本的 moment.js 源代码所在。

你可以使用运行此文件

node main.js

在浏览器中运行它

创建文件 index.html

<html>
<head>
    <title>SystemJS example with moment.js</title>
    <meta charset="UTF-8">

    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script>
        SystemJS.config({
            map: {
                'traceur': 'node_modules/traceur/bin/traceur.js',
                'moment': 'node_modules/moment/src'
            },
            packages: {
                'moment': {
                    main: 'moment.js'
                }
            }
        });

        SystemJS.import('./test.js')
                .then(function(test) {
                    var t = test.test();
                    document.body.appendChild(
                        document.createTextNode(t)
                    );
                })
                .catch(function(e) {
                    console.error(e)
                });

    </script>
</head>
<body>
</body>
</html>

与 node.js 代码的唯一区别是我们使用 <script> 标签而不是 require 加载 SystemJS，我们使用 appendChild 将文本添加到 HTML 文档而不是在控制台中显示。