systemjssystemjs入门


备注

本节概述了systemjs是什么,以及开发人员可能想要使用它的原因。

它还应该提到systemjs中的任何大型主题,并链接到相关主题。由于systemjs的文档是新的,您可能需要创建这些相关主题的初始版本。

安装或设置

有关设置或安装systemjs的详细说明。

使用SystemJS加载moment.js

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模块,它还表明除了importexport 之外,您还可以使用其他新的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.js 执行test() 函数,而不是正常的require 。必须使用SystemJS.config() 配置SystemJS.config() 以便它可以找到traceurmoment 模块的源代码。的路径momentmap 点, moment/src 其中moment.js源代码的ECMAScript版本6驻留目录。

您可以使用运行此文件

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文档添加文本,而不是在控制台中显示它。