Angular2如何解析導入？

Question

所以，我正在學習Angular2，而且我正在使用TypeScript。所以，我不知道SystemJS被用來獲取import功能是這樣的：

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

這是有道理的，但是，我不明白的地方正好是angular2/platform/browser。我非常確定這不是一條路徑，而是用於模擬路徑/命名空間的其他一些東西。另外，在這裏看bootstrap，這是一個類？或者它只是一個功能。是否有可能導入其他內容？

任何特殊的答案都會收到我的賞金。

Answer 1

其實，有幾件事情在這裏瞭解：

• 打字稿文件transpiled到JavaScript文件。當配置您的TypeScript編譯器時，您將配置文件中的import將如何翻譯。這種配置告訴編譯器使用SystemJS：

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

• 這樣的transpiled打字稿文件看起來像下面這樣：

  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將爲您提供其他模塊所需的元素的方式。相應的列表是基於你在打字稿代碼中使用......要讓上面的列表中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