Можно ли объединить jspm с системой TypeScript и TypeScript?
Я не мог найти документацию или образцы этого.
Можно ли объединить jspm с системой TypeScript и TypeScript?
Я не мог найти документацию или образцы этого.
SystemJS был добавлен как вид модуля для TypeScript, поэтому вы можете использовать SystemJS из коробки и скомпилировать с флагом модуля:
tsc --module system app.ts
Это было добавлено вместе с синтаксисом импорта модулей ES6, поэтому вы должны иметь возможность использовать этот стиль и скомпилировать его с тем, что вам нужно.
import * as $ from "jquery";
Если вы используете синтаксис SystemJS, вы можете объявить нужные вам части следующим образом:
systemjs.d.ts
interface System {
then: (cb: Function) => void;
}
interface SystemStatic {
import: (name: string) => System;
}
declare var System: SystemStatic;
export = System;
Затем вы сможете использовать его следующим образом:
/// <reference path="jquery.d.ts" />
import System = require('systemjs');
System.import('jquery').then(($: JQueryStatic) => {
$('#id').html('Hello world');
});
Обновление февраль 2016. По просьбе Абхишека Пракаша я установил примерный репозиторий в GitHub. Не стесняйтесь играть с источниками и смотрите, как работает рабочий процесс typescript и jspm.
Как я хотел попробовать typescript (ссылаясь на версию 1.5 здесь), чтобы работать вместе с AngularJS и jspm, я не мог найти никакого решения, но наткнулся на этот вопрос, и Стив ответил, но я все еще не мог сделать он работает с этой информацией. Поэтому я пробовал много вещей сам и, наконец, сделал его работу. Итак, вот пример использования typescript с jspm в среде AngularJS:
Сначала установите AngularJS с jspm с
jspm install angular
Затем установите определенные файлы определения с помощью tsd
или вручную.
Теперь вы можете импортировать AngularJS с синтаксисом ES6:
/// <reference path="typings/angularjs/angular.d.ts" />
import * as angular from 'angular';
Быстрая заметка, так как это сошло с ума от первых попыток: вам понадобятся и то, и другое, правильный путь к angular и определениям типов! Если один из них отсутствует (для меня я не включил опорную строку), tsc будет бросать
ошибка TS2307: не удается найти модуль 'angular'.
Это трудно отлаживать, как я всегда думал, он не смог найти модуль, но я просто пропустил ссылку на определение. Поэтому просто убедитесь, что у вас всегда есть правильные определения для всего, что вы пытаетесь импортировать!
Затем скомпилируйте свой typescript с помощью tsc --module system app.ts
, тогда как значение для модуля может быть commonjs, amd, system или umd. Выберите систему модулей, которую вы хотите использовать в своей среде! Нет необходимости использовать систему для SystemJS. Компилятор typescript будет только обернуть шаблон выбранного выбранного модуля вокруг вашего кода (или, лучше сказать, создать модуль указанного типа модуля), поэтому его можно будет загрузить SystemJS позже (при использовании --module system
).
В моем случае для среды браузера AngularJS я выбрал amd (использование system
не помогло, так как загрузчик ESJ файлов из SystemJS не смог загрузить файлы... Я не знаю, почему все же!).
Используя переключатель --module amd
, я мог бы легко импортировать скомпилированный файл с SystemJS внутри HTML-кода моей страницы, используя:
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('src/app');
</script>
Надеюсь, это поможет кому-то, кто остался один в документации, как и я.
Я пробовал текущие решения, размещенные на официальном сайте JSPM, и некоторые репозитории git, намеченные в этом сообщении, безрезультатно. Причина в том, что обработка typescript перечисляет файлы с текущей реализацией TS. Я предлагаю вам сначала перенести приложение с транспилером TS напрямую, а затем запустить этот контент с помощью инструментов сборки JSPM.
http://www.itsgettinghotamerica.com/2016/07/making-javascript-build-process-work.html