Angular2 如何解析导入？

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（例如http.dev.js）中包含的 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