Angular 2模块加载和导入

Question

我有一个使用angular.io中的Quickstart创建的Angular 2应用程序，我使用SystemJs进行模块加载（请参阅QuickStart guide），我有以下问题：

1. import { Component} from '@angular/core'; 这句话在做什么？它是加载@ angular / core还是仅从@ angular / core加载Component？ @ angular / core是如何在这里加载的，因为我没有包含以任何方式加载角度的脚本标记？
2. Angular 2中systemJs的用途是什么？
3. 我的es6代码如何转换为es5？
4. systemJs还在这里捆绑所有js文件吗？或者每个角度模块都通过ajax加载？

Answer 1

为什么不查看从打字稿中转换出来的javascript？

1. 从＆＃39; @ angular / core＆＃39;;
导入{Component}

有两件事：如果你在typescript中将commonjs作为模块格式，则将其透明为require调用，例如

{{1}}

其次它告诉编译器在@ angular / core中查找类Component的类型。默认情况下，导入中的所有非相对路径都在node_modules文件夹中查找。所以它会看：

对于@ angular / core
，

node_modules/@angular/core/index.d.ts

1. SystemJs在运行时用作模块加载器。浏览器在生产中只看到已转换的javascript。所以必须知道，在哪里查找依赖项，这在systemjs.config.js中定义。

@ angular / core的包被定义为默认查找node_modules。在这里，您还可以定义从CDN加载依赖项，node_modules中的版本仅用于将Typescript编译为Javascript。

1. Typescript编译器执行从ES6到ES5的转换。请参阅typescript config：tsconfig.json

2. SystemJs没有进行捆绑，它实际上可以加载捆绑包。捆绑您的JavaScript需要在持续集成中完成，例如通过grunt或gulp。

Answer 2

1. 实际上并没有做太多。它只是使当前文件中的Component已知，并指向声明Component的位置。

Answer 3

1：来自文件路径@angular/core：它将Component类导入当前文件

2：系统js是一个模块加载器，它加载所有javascript模块更多的捆绑它们

如果您在package.json文件中检查了angular2的依赖关系 您将找到@angular/core路径作为依赖项。所以在@ angular / core中定义了Component类：

声明import {Component} from @angular/core说：按照@angular/core的路径，使Component类可用于当前文件