Angular2 SystemJs 捆绑和非捆绑 js

Question

我是 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？（当运行 npm install 时，包中包含所有 .ts 和 .d.ts 文件）

Answer 1

This all makes sense to me as the bundles/code.js has something like System.registerDynamic("code/foo",...) and so the import knows what code/foo is (This is my understanding of it)

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

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

异步加载 system.js 将得到：

Uncaught ReferenceError: System is not defined

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 文件添加到您的源文件中，然后像使用代码一样使用它们。

Angular2 SystemJs 捆绑和非捆绑 js

Angular2 SystemJs Bundles and Non Bundled js

format

require

bundles

systemjs

angular

我有两个问题：