0

我是 SystemJs 和 Angular2 的新手。我正在使用 3rd 方包，其中一些有bundles/code.js文件，一些没有。

那些正在使用的bundles/code.js我已经设法开始工作。

我包括<script src=foo/bundles/code.js>，然后能够import * from 'code/foo'在我的ts文件中。

这一切对我来说都很有意义，因为bundles/code.js有类似的东西System.registerDynamic("code/foo",...)，所以import知道是什么code/foo（这是我对它的理解）

我遇到了一个不使用捆绑包的包。我需要加载的.js文件如下所示：

// ./vendor/ng2-file-upload/ng2-file-upload.js

function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
__export(require('./components/file-upload/file-select'));
__export(require('./components/file-upload/file-drop'));
__export(require('./components/file-upload/file-uploader'));
var file_select_2 = require('./components/file-upload/file-select');
var file_drop_2 = require('./components/file-upload/file-drop');
exports.FILE_UPLOAD_DIRECTIVES = [file_select_2.FileSelect, file_drop_2.FileDrop];
//# sourceMappingURL=ng2-file-upload.js.map

我意识到这不是System格式。我在我的中尝试了以下内容index.html：

System.config({
    packages: {
        'js': {
            format: 'register',
            defaultExtension: 'js'
        }
    },
    meta: {
       'vendor/ng2-file-upload/ng2-file-upload.js' : {
            format: 'cjs', // I have also tried 'amd' and 'global'
            defaultExtension: 'js'
       }
    }
});

我也试过

System.config({
    packages: {
        'js': {
            format: 'register',
            defaultExtension: 'js'
        },
       'vendor/ng2-file-upload/ng2-file-upload.js' : {
            format: 'cjs', // I have also tried 'amd' and 'global'
            defaultExtension: 'js'
       }
    }
});

无论我做什么，我都会遇到以下错误：

未捕获的 ReferenceError：未定义要求

我有两个问题：

  • 我该如何加载ng2-file-upload.js？
  • 我将如何bundle为这个包创建一个？（该包包含运行时的所有.ts和.d.ts文件npm install）
4

1 回答 1

1

这一切对我来说都很有意义，因为 bundles/code.js 有类似 System.registerDynamic("code/foo",...) 的东西，所以导入知道 code/foo 是什么（这是我对它的理解）

您是对的，当您将代码编译为系统模块时，使用脚本标签加载它们是安全的，假设SystemJS已加载。您可以使用以下方法进行测试：

  <script async src="~/system.src.js"></script>

异步加载 system.js 将给出：

未捕获的 ReferenceError：系统未定义

模块也是commonjs如此，所以如果你不使用RequireJS加载器，不要通过脚本标签加载它们。相反，您应该使用SystemJS加载commonjs模块：

  System.import("vendor/ng2-file-upload/ng2-file-upload.js")
    .then(function() {
       System.import("/static/scripts/bootstrap.js");
    }, console.error.bind(console));

ng2-file-upload.js应该已经是一个捆绑包，因此您正在以这种方式加载它。如果不是，只需将其.ts文件添加到您的源文件中，并以与使用代码相同的方式使用它们。

于 2016-02-28T01:48:38.400 回答