1

У меня есть два класса:

export class ActionsCollection{
    constructor(greeting :string){
        this.greet(greeting);
    }

    public greet(greeting :string) {
        return "<h1>"+greeting+"</h1>";
    }
} 

и:

import {ActionsCollection} from "./actionsCollection";

class Greeter extends ActionsCollection{
    constructor(public greeting: string) {
        super(greeting); 
    }
}

alert(new Greeter("Hello, world!"));

Greeter генерится в такой файл, в котором есть строка require("./actionsCollection"). Но я хочу сделать так, чтобы все эти файлы (*.ts) генерились в один какой-нибудь main.js, при этом не нужен будет никакой require.

Можно ли так сделать? И если да то как?

2
  • Генерится чем? Какой командой собирается код? Какой версией TS?
    – user181100
    Commented 18 апр. 2016 в 14:35
  • @D-side Последняя версия, генерятся в ide webstorm 2016. Но можно и с помощью gulp.
    – sanu
    Commented 18 апр. 2016 в 14:40

2 ответа 2

1

Какой-то загрузчик модулей всё равно потребуется. В TypeScript 1.8 добавили возможность склеить модули в один файл для форматов amd и system (--module&--outFile), но соответствующий загрузчик модулей нужен даже в этой ситуации.

Так что вам придётся подвергнуть результат работы компилятора TypeScript дополнительной обработке "упаковщиком" вроде Webpack или Browserify. К примеру, вот (чуть поправленная) конфигурация Webpack для сборки TypeScript в один файл, опубликованная James Brantly:

webpack.config.js

module.exports = {  
  entry: './src/greeter.ts',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
}

package.json

{
  "name": "example",
  "devDependencies": {
    "ts-loader": "^0.8.2",
    "webpack": "^1.13.0"
  }
}

дерево проекта

example
|= src
|  |- greeter.ts
|  |- actionsCollection.ts
|- package.json
|- webpack.config.js
|- bundle.js  (генерируется webpack'ом, изначально отсутствует)

В результате после запуска webpack сгенерируется автономный (на уровне браузера) bundle.js. А webpack --watch будет генерировать файлик заново при сохранении составляющих.

6
  • Вы хотите сказать что без require не обойтись в любом случае? (это странно, ведь это нормально когда все скрипты мининифицированы в один). Просто при import - он заменяет в js файле на require()
    – sanu
    Commented 18 апр. 2016 в 16:30
  • 1
    @sanu0074 эм, на выходе из tsc всегда будут модули, тип модулей зависит от флагов компиляции. А уже модули webpack склеивает между собой в один автономный файл со своим упрощённым аналогом require. Вот. Результат можно минифицировать и оно станет ещё меньше.
    – user181100
    Commented 18 апр. 2016 в 16:38
  • а можно ли сделать это, ограничившись только gulp'om? (я знаю, вопрос выглядит глупо, но все же он актуален)
    – sanu
    Commented 19 апр. 2016 в 6:43
  • 1
    @sanu0074 естественно. Gulp же сам ничего не делает, только координирует. Поставить плагин для Gulp, подкрутить сборку и всё.
    – user181100
    Commented 19 апр. 2016 в 8:02
  • 1
    @sanu0074 сложно, я ни в Gulp, ни в Webpack не умею. Но означенный конфиг вебпака уже работает, сослаться на результат из Gulp должно быть несложно.
    – user181100
    Commented 19 апр. 2016 в 8:12
-2

Вам потребуется:

  • Node.js
  • NPM

Далее через пакетный менеджер npm устанавливаем gulp глобально

sudo npm install -g gulp

Переходим в папку проекта:

npm install --save-dev gulp gulp-tsc

Создаем файл gulpfile.js для всех наших задач для gulp и записываем в него следующее:

var gulp       = require('gulp');
var typescript = require('gulp-tsc');

gulp.task('build-tsc', function () {
    return gulp.src('src/**/*.ts')
        .pipe(typescript())
        .pipe(gulp.dest('dist/'));
});

gulp.task('watch', function () {
    gulp.watch('src/**/*.ts', ['build-tsc']);
});

gulp.task('default', ['build-tsc', 'watch']);

build-tsc - компилит все наши .ts файлы

watch - отслеживает изменения в файлах и перезапускает компиляцию (чтобы постоянно не перезапускать скрипт


После того как настроили все наши таски (задачи) запускаем gulp в терминале:

gulp

3
  • Если бы всё было так просто :) Нет, это скомпилирует в RequireJS-модули.
    – user181100
    Commented 18 апр. 2016 в 15:26
  • С чего это вдруг? о_О Видимо в typescript много что поменялось за год. Но это бред) раньше такого не было. Как вариант могу предложить WebStorm. Там есть встроенная компиляция TypeScript Commented 18 апр. 2016 в 15:38
  • В гугле на удивление много вопросов с компиляцией TS в один файл, так что такая ситуация существует уже давно .-. Но что я распинаюсь, собстна, я проверил, генерит модули, без загрузчика не работает. Можете проверить сами и тоже убедиться :)
    – user181100
    Commented 18 апр. 2016 в 15:40

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.