Typescript компиляция. Как решить «Uncaught ReferenceError: exports is not defined»?

Question

[Alexey]

Компиляция проходит успешно, использую Gulp с плагином gulp-typescript.
К сожалению при запуске кода в браузере возникает ошибка:

Скомпилированный JS имеет вот такую строчку "Object.defineProperty(exports, "__esModule", { value: true });"
Соответственно ошибка: "main.js:2 Uncaught ReferenceError: exports is not defined"
tsc 2.4.2

Собственно код вот такой:

main.ts

import * as _ from 'lodash';
import * as $ from 'jquery';

tsconfig.json

{
  "files": [
    "../../web/ts/main.ts"
  ],
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
   "emitDecoratorMetadata": true,
   "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
   "noImplicitAny": true,
   "removeComments": true,
   "preserveConstEnums": true,
   "allowUnreachableCode": true
  },
  "exclude": [
    "node_modules"
  ]
}

gulpfile.js

var tsProject = ts.createProject("tsconfig.json");
gulp.task("typescript", function () {
    return tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest(paths.jsFolder));
});

Где я допустил ошибку?
И как правильно делать импорты с учетом конфигурации модулей в файле tsconfig.json?

Answer 1

[Данакт Фрост]

Ошибка из-за того, что у вас не подключён commonjs, который вы указали в tsconfig.

Comments

[Alexey]

Не могли бы объяснить по-подробнее, каким образом возможно подключение?

[Данакт Фрост]

Alexey, про gulp не скажу. Можно напрямую, подключив скрипт, а можно использовать вебпак, например

[Alexey]

Тоесть насколько я понял, правильнее было бы использовать для работы с JS - webpack, а все остальное к примеру компиляция css из scss, оптимизация изображений, и.т.д. делать с помощью gulp?

[Данакт Фрост]

Alexey, ни в коем случае. Если используете webpack, используйте его для всего, если gulp — то gulp. Конкретно для typescript я бы посоветовал webpack и awesome typescript loader, в котором есть предустановленный babel. Все вещи, вроде препроцессинга scss в css и оптимизации изображений тоже есть в webpack.

[Alexey]

Данакт Фрост, спасибо за ответы, очень помогло.