Question

所以，我正在学习Angular2，我正在使用TypeScript。所以，我知道SystemJS用于获取import这样的功能：

import { bootstrap } from "angular2/platform/browser";

这是有道理的，但是，我不明白angular2/platform/browser到底在哪里。我很确定它不是路径，而是用于模拟路径/命名空间的其他东西。另外，在这里看bootstrap，它是一个类吗？或者它只是一个功能。是否有可能导入其他东西？

任何特殊答案都会得到我的赏金。

Answer 1

事实上，这里有几点需要理解：

将TypeScript文件转换为JavaScript文件。配置TypeScript编译器时，您将配置import文件中tsconfig.json的翻译方式。此配置告诉使用SystemJS：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

这样，转换后的TypeScript文件将如下所示：

System.register(['angular2/platform/browser', 'angular2/router', 'angular2/http', 'angular2/core', './app.component', './services/companies.service'], function(exports_1) {
  var browser_1, router_1, http_1, core_1, router_2, app_component_1, companies_service_1;
  return {
    (...)
  }
});

您可以看到导入是System.register函数参数的一部分。它是SystemJS为您提供其他模块所需元素的方式。相应的列表基于您在TypeScript代码中使用的import ...要获得上面的列表，我使用了以下代码：

import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {provide} from 'angular2/core';
import {LocationStrategy, Location, HashLocationStrategy } from 'angular2/router'; 
import {AppComponent} from './app.component';
import {CompanyService} from './services/companies.service';

System.register函数接受多个参数。在前一种情况下，模块的名称不仅仅定义了导入。这是因为我们在HTML文件中使用了SystemJS的以下配置。这告诉模块的名称对应于文件本身：

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/boot')
       .then(null, console.error.bind(console));
</script>

关于Angular2，node_modules/angular2/bundles中包含的JS文件（例如http.dev.js）在文件中包含多个模块。在这种情况下，使用System.register函数将模块注册到SystemJS中，但附加参数：

System.register("angular2/http", ["angular2/core", "angular2/src/http/http", "angular2/src/http/backends/xhr_backend", "angular2/src/http/backends/jsonp_backend", "angular2/src/http/backends/browser_xhr", "angular2/src/http/backends/browser_jsonp", "angular2/src/http/base_request_options", "angular2/src/http/base_response_options", "angular2/src/http/static_request", "angular2/src/http/static_response", "angular2/src/http/interfaces", "angular2/src/http/backends/browser_xhr", "angular2/src/http/base_request_options", "angular2/src/http/base_response_options", "angular2/src/http/backends/xhr_backend", "angular2/src/http/backends/jsonp_backend", "angular2/src/http/http", "angular2/src/http/headers", "angular2/src/http/enums", "angular2/src/http/url_search_params"], true, function(require, exports, module) {
  var global = System.global,
  __define = global.define;
  global.define = undefined;
  (...)
});

总而言之，这是基于像SystemJS这样负责模块解析的模块系统。

SnareChops在这个问题上发表了一个很好的答案：

Angular2 & TypeScript importing of node_modules

Angular2如何解析导入？

1 个答案: