Как Angular2 разрешает импорт?

Question

Итак, я изучаю Angular2, и я использую TypeScript. Так, я знаю, что SystemJS используется, чтобы получить import функциональность, как это:

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

Это имеет смысл, но я не понимаю, где именно angular2/platform/browser есть. Я уверен, что это не путь, а какая-то другая вещь, которая используется для имитации путей/пространств имен. Кроме того, глядя на bootstrap здесь, это класс? Или это просто функция. И можно ли импортировать другие вещи?

Любые исключительные ответы получат щедрость от меня.

Answer 1

На самом деле, есть несколько вещей, чтобы понять здесь:

• машинопись файлы transpiled в файлы 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" 
      ] 
  } 
  

• Этот способ 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 функция принимает несколько параметров. В предыдущем случае имя модуля не определяется только импортом. Это потому, что мы используем следующую конфигурацию SystemJS в файле HTML. Это говорит о том, что имя модуля соответствует самому файлу:

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

• Что касается Angular2, файлы JS, содержащихся в node_modules/angular2/bundles (например http.dev.js) содержит несколько модулей в файлах. В этом случае модули регистрируются в SystemJS с помощью функции System.register, но с дополнительным параметром:

  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