Angular2, пути SystemJS для компонентов Bower

Я создал пример приложения Angular2, в котором один из моих модулей использует внешнюю библиотеку (остальные), например:

/// <reference path="../../typings/tsd.d.ts" />
import rest = require('rest');
import jsonpClient = require('rest/client/jsonp');
import mime = require('rest/interceptor/mime');
...

я использовал

tsd install rest

которые поместили rest.d.ts в каталог "typings" и использовали

bower install rest

чтобы получить версию среды выполнения (это нигде не объяснялось. Я предполагаю, что мне нужно сделать что-то подобное?)

Я настроил свой скрипт gulp для копирования двух каталогов из bower_components ("отдых" и его зависимость "когда") в dist/lib

Само приложение компилируется нормально, но в браузере оно не может разрешить зависимости остальных/когда модулей.

я добавил

 System.config({
      "baseURL": "/",
      "transpiler": "traceur",
      "paths": {
        "components/*": "components/*.js",
        "provider/*": "provider/*.js",
        "services/*": "services/*.js",
        "model/*": "model/*.js",
        "rest": "lib/rest/rest.js",
        "rest/*": "lib/rest/*.js",
        "when": "lib/when/when.js",
        "when/*": "lib/when/*.js",
        "*": "lib/*.js"
      }
    });

в мой файл index.html, и я, вероятно, мог бы продолжать добавлять файлы в этот список, но почему-то это кажется... неправильным.

Конечно, не может быть правильно, что я должен перечислять внутреннюю файловую структуру каждого пакета в моем index.html? Я вижу, что модуль «когда» предполагает найти свои зависимости в «./lib», где «остальное» имеет совершенно другую структуру.

Итак, мои вопросы:

  • Что я неправильно понял в том, как импортировать пакеты javascript, управляемые через Bower (или npm), в клиентскую часть Angular2?

  • Мне действительно нужно перечислять каждый файл каждого модуля в System.paths, чтобы он работал?


angular systemjs
person Soraz    schedule 09.08.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

TSD устарел, используйте typings для установки файлов объявлений (.d.ts). Файлы объявлений, если они установлены правильно, можно найти в вашем каталоге typings. Файл объявления описывает форму внешней библиотеки JavaScript. В первую очередь они помогают вам во время разработки (дополнение кода, проверка типов и т. д.). Вам не нужно импортировать их в машинописный текст. Их можно исключить из процесса компиляции машинописного текста, используя параметр exclude в файле tsconfig.json. Вам не нужно включать внешние библиотеки javascript в ваш System.config, просто сделайте ссылку на скрипт в вашем index.html. Вы можете сопоставить модули машинописного текста, такие как angular2, в вашем System.config с другими URL-адресами и объявить свое собственное приложение машинописного текста как пакет. Так:

  • Файлы .d.ts для внешних библиотек javascript в основном являются файлами времени разработки.
  • Модули машинописного текста могут быть сопоставлены с вашими собственными URL-адресами.
  • определите свое собственное машинописное приложение как пакет.
  • Нет, вам не нужно продолжать добавлять файлы в ваш System.config.

Пример tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
  },

  "exclude": [
    "node_modules",
    "wwwroot",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Пример System.config с приложением в wwwroot/cool/app:

System.config({
    defaultJSExtensions: true,
    packages: {
        'cool/app': {
            format: 'register',
            defaultExtension: 'js'
        },
    },

    map: {
        'rxjs': 'assets/scripts/rxjs',
        'angular2': 'assets/scripts/angular2'
    }
});
person Tom Verschoore    schedule 18.03.2016