Как скомпилировать приложение Angular2 TypeScript в один файл?

Я понимаю, что я могу скомпилировать свое приложение с tsc my_app.ts --target system, и он будет генерировать файл с оболочкой SystemJS для каждого импортированного модуля, что является удивительным, но он генерирует анонимные (безымянные) функции, поэтому я не могу их просто конкатенировать в один файл.

Я подумал об этом вопросе "как скомпилировать TypeScript для названных модулей SystemJS", но моя цель - просто скомпилировать мое приложение Angular2 к одному файлу SystemJS или нет.

Ответ 1

Опция --outFile работает с опцией --module (для AMD и SystemJS) с TypeScript 1,8, так что это можно сделать изначально. Здесь журнал изменений. TypeScript также автоматически вытягивает все зависимости, которые не находятся во внешних модулях, поэтому достаточно всего лишь для компиляции основного файла приложения.

Если Angular 2 не отключается от SystemJS, способ связать ваше приложение в одном файле должен быть таким же простым, как компиляция с такими параметрами, как tsc app.ts --target ES5 --module system --experimentalDecorators --moduleResolution node --emitDecoratorMetadata --outFile app.js

После этого должно быть возможно загрузить приложение с чем-то вроде:

<script src="/bower_components/system.js/dist/system-register-only.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/app.js"></script>
<script>
    System.import('app');
</script>

Ответ 2

Для Интернета:

Используйте компилятор TypeScript для компиляции JavaScript.
Используйте browserify на JavaScript, чтобы объединить его в один файл.

Более простой способ сделать это - использовать tsify. Это плагин для браузера, который компилирует TypeScript.

Ответ 3

Вам нужно сказать вам tsc compailer, куда поместить ваши js файлы после tsc compile (команда: tsc -w). Два параметра в файле tsconfig.js сообщают TypeScript compailer, что все js-out помещены в один файл в каталоге

"outDir":"dist/",
"outFile": "dist/app.js"

Мой полный tsconfig.js ниже

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir":"dist/",
    "outFile": "dist/app.js"
  }
}