Angular2 SystemJs包和非捆绑的js [英] Angular2 SystemJs Bundles and Non Bundled js

问题描述

我是新来SystemJs和Angular2。我使用的第三方包，其中有一些包/ code.js 文件，有些则没有。

这是使用包/ code.js的那些我设法得到工作。

我包括＆LT;脚本的src =富/包/ code.js＆GT; 和上午然后能够从'$ 进口* C $ C /富'里面我 TS 文件。

这一切对我来说很有意义的包/ code.js 有类似 System.registerDynamic（code /富，...）等等导入知道 code /富是（这是我对它的理解）

我所遇到的不使用捆绑包。在的.js 文件我需要加载看起来是这样的：

  // ./vendor/ng2-file-upload/ng2-file-upload.js功能__export（M）{
    为（米变种p）的，如果（exports.hasOwnProperty（p）的！）出口[P] = M [P];
}
__export（要求（'./组件/文件上传/文件选择））;
__export（要求（'./组件/文件上传/文件拖放'））;
__export（要求（'./组件/文件上传/文件上传'））;
VAR file_select_2 =要求（'./组件/文件上传/文件选择）;
VAR file_drop_2 =要求（'./组件/文件上传/文件拖放'）;
exports.FILE_UPLOAD_DIRECTIVES = [file_select_2.FileSelect，file_drop_2.FileDrop]
//＃sourceMappingURL = NG2-文件upload.js.map
 

我知道这是不是在系统格式。我曾尝试在下面我 index.html的：

  System.config（{
    包：{
        'JS'：{
            格式为：注册，
            defaultExtension：'JS'
        }
    }，
    元：{
       供应商/ NG2文件上传/ NG2-文件upload.js：{
            格式：'CJS'，//我自己也尝试'AMD'和'全球'
            defaultExtension：'JS'
       }
    }
}）;
 

我也试过

  System.config（{
    包：{
        'JS'：{
            格式为：注册，
            defaultExtension：'JS'
        }，
       供应商/ NG2文件上传/ NG2-文件upload.js：{
            格式：'CJS'，//我自己也尝试'AMD'和'全球'
            defaultExtension：'JS'
       }
    }
}）;
 

没有不管我做什么我结束了以下错误：

未捕获的Ref​​erenceError：要求没有定义

我有2个问题：

• 如何加载 NG2-文件upload.js ？


• 我如何去创建一个捆绑此包？ （包运行时，包含所有 .TS 和 .d.ts 文件 NPM安装）

解决方案

  

这一切对我来说很有意义的包/ code.js有类似System.registerDynamic（code / foo的，...）等进口知道什么code / foo是（这是我对它的理解）

您是正确的，当您编译code为系统模块，它是安全与脚本标签加载它们，假设 SystemJS 被加载。您可以使用测试：

 ＆LT;脚本异步SRC =〜/ system.src.js＆GT;＆LT; / SCRIPT＆GT;
 

加载system.js异步会给：

  

未捕获的Ref​​erenceError：系统没有定义

同样是 CommonJS的模块，所以如果你不使用 RequireJS 装载机，不加载它们通过脚本标记。相反，你应该使用 SystemJS 加载 CommonJS的模块：

  System.import（供应商/ NG2文件上传/ NG2-文件upload.js）
    。然后（函数（）{
       System.import（/静态/脚本/ bootstrap.js）;
    }，console.error.bind（控制台））;
 

NG2-文件upload.js 应该已经是一个包，因此你加载这种方式。如果不是，只是添加它的 .TS 文件到您的源文件，并使用它们您使用的是code以同样的方式。

I'm new to SystemJs and Angular2. I am using 3rd party packages, some of which have bundles/code.js files and some do not.

The ones that are using bundles/code.js I have managed to get working.

I include <script src=foo/bundles/code.js> and am then able to import * from 'code/foo' inside my ts files.

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)

I have come across a package that does not use bundles. The .js file I need to load looks like this:

// ./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

I realize this is not in System format. I have tried the following in my 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'
       }
    }
});

I have also tried

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'
       }
    }
});

No matter what I do I end up with the following error:

Uncaught ReferenceError: require is not defined

I have 2 questions:

• How do I load ng2-file-upload.js?
• How would I go about creating a bundle for this package? (The package contains all .ts and .d.ts files when running npm install)

解决方案

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)

You are correct, when you compile your code as system modules, it is safe to load them with script tag, assuming SystemJS is loaded. You can test this with:

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

Loading system.js asynchronously will give:

Uncaught ReferenceError: System is not defined

Same is with commonjs modules, so if you don't use RequireJS loader, don't load them via script tag. Instead you should use SystemJS to load commonjs modules:

  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 should already be a bundle, hence you're loading it this way. If it's not, just add it's .ts files to your source files and use them the same way you are using your code.

这篇关于Angular2 SystemJs包和非捆绑的js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！