如何从包中调用命名模块答案

【问题标题】：How to call a named module from a bundle如何从包中调用命名模块
【发布时间】：2015-12-21 01:56:38
【问题描述】：

我有一个使用 ASP.NET 5 和 TypeScript 的项目。基本上这是我的wwwroot 文件夹

-wwwroot
|-app
||-person.js
||-employee.js
||-init.js
|-js
||-libraries.js    // Contains: systemjs, ...etc
||-app.bundle.js

person.js 是一个导出 class Person 的 es6 模块。

employee.js 导入 person.js 并导出 class Employee。

init.js 只是导入employee.js，创建一个新的Employee 对象并控制台他的名字。

//init.js
import { Employee } from "./employee";

var p = new Employee();
console.log(p.name);

现在我使用systemjs-builder 将这三个文件捆绑到位于js 文件夹中的app.bundle.js 中，这产生了三个名为System.register 的调用：

System.register("wwwroot/app/person.js",...
System.register("wwwroot/app/employee.js",...
System.register("wwwroot/app/init.js"...

在我的index.cshtml 视图文件中，我有这些脚本标签：

<script type="text/javascript" src="./js/libraries.js"></script>

<!-- 2. Configure SystemJS -->
<script type="text/javascript">
    System.config({
        packages: {
            js: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
    System.import('js/app.bundle')
        .then(null, console.error.bind(console));
</script>

显然，因为我已经命名了模块，所以 init.js 中的任何内容都不会被调用。

所以我的问题是，我怎样才能拨打一个名为 System.register 的电话？

注意：我是 es6 模块的新手，所以这是一个测试项目，可以让你的想法正确。

【问题讨论】：

标签： ecmascript-6 systemjs

【解决方案1】：

从这个wiki page，我用这个解决了我的问题：

<script type="text/javascript">
    System.config({
        bundles: {
            'app.bundle.js': ['wwwroot/app/init']
        },
        packages: {
            wwwroot: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
    System.import('wwwroot/app/init')
        .then(null, console.error.bind(console));
</script>

解释一下：

一旦尝试导入该捆绑包中的任何模块，捆绑包扩展将自动下载该捆绑包。

所以我需要做的就是告诉systemjs 将init 模块注册到我的包中，它会下载包并执行init 模块中的任何内容。

【讨论】：