typescript - Angular2 如何解析导入？

Question

所以，我正在学习 Angular2，并且正在使用 TypeScript。所以，我知道 SystemJS 用于获取 import 功能，如下所示:

从 "angular2/platform/browser"导入 { bootstrap };

这是有道理的，但是，我不明白 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