TypeScript компиляция как один JS файл

У меня есть тестовый проект на TypeScript, код может найти здесь.

Когда я создаю новый проект с VS2012, создается файл app.ts. Когда я меняю контент, как показано ссылкой, и добавляет новый модуль под названием GameModule, я получаю ошибку компиляции. Когда я ', удалив app.ts и создав Main.ts вместо этого, все компилируется в порядке, но есть проблема - только Main.ts скомпилируется в Main.js, а GameModule.ts остается нескомпилированным.

Как я могу заставить компилятор слить весь код в один JS?

Ответы

Ответ 1

Вы должны использовать аргументы командной строки компилятора

--out FILE Объединить и испустить выход в один файл

Пример

 tsc --out modules.js main.ts app.ts

Ответ 2

Использование GUI

Если у вас установлена ​​Visual Studio 2013 и расширение TypeScript, щелкните правой кнопкой мыши свой проект в проводнике решений и выберите Properties. Перейдите на вкладку TypeScript Build. Выберите Combine JavaScript output into file: и введите имя для комбинированного файла в поле ввода рядом с параметром. Помните, что вы можете использовать переменные в этом поле. Например: "$ (ProjectDir) dist\js\myCombinedFile.js".

Вручную

Если вы не можете найти этот параметр GUI в любом месте, измените файл конфигурации проекта вручную. Перейдите в папку проекта; щелкните правой кнопкой мыши проект в проводнике решений и нажмите Open folder in File Explorer. В папке, которая появляется, вы увидите пару файлов. Отредактируйте файл myProject.csproj любым текстовым редактором по вашему выбору. Найдите две строки, которые читаются так:

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">

и

<PropertyGroup Condition="'$(Configuration)' == 'Release'">

Внутри двух деревьев дочерних узлов добавьте новый родительский родитель:

<TypeScriptOutFile>$(ProjectDir)dist\js\myCombinedFile.js</TypeScriptOutFile>

Когда вы вернетесь в Visual Studio, он должен спросить вас, нужно ли перезагружать проект. Конечно, это должно быть сделано для того, чтобы изменения вступили в силу!

Ручная процедура, которую я только что описал, - это именно то, что для вас сделает процедура GUI. Мои мысли вокруг ручной процедуры происходят из этого источника.

Наконец

Создайте свой проект так, как обычно. Если это не сработает, попробуйте перезагрузить проект.

Ответ 3

Для этого вам не нужен сторонний инструмент или библиотека.
Вы можете использовать Microsoft System.Web.Optimization:

BundleTable.Bundles.Add(new ScriptBundle("~/scripts/bundle.js").IncludeDirectory("~/scripts/", "*.js", true));

Все файлы *.js(результаты компиляции ваших *.ts файлов) будут объединены и доступны во время выполнения: http://.../scripts/bundle.js

Ответ 4

Вы можете использовать tsc --project ./ для создания конкатенированного выходного файла, если вы используете файл конфигурации tsconfig.json в текущем каталоге.

Файл tsconfig.json может выглядеть следующим образом:

{
  "compileOnSave": true,
  "compilerOptions": {
    "module":"system",
    "target": "es5",
    "sourceMap": true,
    "outFile": "dist/app-build.js"
  },
  "files":[
    "./src/index.ts",
    "./typings/browser.d.ts"
  ]
}

Классический формат файлов:

project/
   - src/ 
        - index.ts
        ... all my ts files
   - dist /
       - vendor.js        # angular, jquery...
       - app-build.js     # our build project
       - system.js        # Module loader we used
       - index.html       # call all js
   - typings/
       - browser.d.ts
       - main.d.ts     # for node.js server side, not included
   - package.json
   - tsconfig.json

Плохая новость в том, что нам нужен звонок SystemJS (работает так же с RequireJS, но с Tsc 1.8, CommonJS не принято для конкатенированной сборки)

Итак, давайте быстро узнать о SystemJS: Добавить SystemJS и вызвать модуль в index.html:

<html lang="en" ng-app="skeleton">
<head>
    <script src="system.js" type="text/javascript"></script>
    <script src="angular.min.js"></script>
    <script src="app-build.js" type="text/javascript"></script>
</head>
<body>

   <skeletonDirective></skeletonDirective>

<script type="text/javascript">

    System.import('index')

</script></body></html>

Большим преимуществом является то, что вы также можете позволить своему идее собрать его для вас. IDE необходимо в любом случае компилировать для понимания типов, поэтому мы можем избежать его компиляции дважды. Вам не нужен Gulp, браузер или что-нибудь на данный момент. SystemJS может делать большинство вещей, таких как загрузка html-шаблона.

Ответ 5

Добавьте postbuild, который выполняет Browserify.js

Ответ 6

Если бы я понял, что есть другой способ создания одного JS файла:

  • Создайте новый HTML файл и включите все ваши файлы .ts, используя:

    <script type="text/typescript" src="GameModule.ts"></script>

    <script type="text/typescript" src="app.ts"></script>

  • Добавить TypeScript Скомпилировать.js файлы:

    <script type="text/javascript" src="http://niutech.github.com/typescript-compile/js/typescript.min.js"></script>

    <script type="text/javascript" src="http://niutech.github.com/typescript-compile/js/typescript.compile.min.js"></script>

  • Откройте этот HTML файл в браузере. Автоматически скомпилированный JS-код будет введен в один тег <script type="text/javascript"></script> в конце тела. Вы можете просмотреть и скопировать его с помощью Web Inspector или Firebug.

Ниже приведена рабочая демонстрация .