Импорт класса машинописи из другого файла

Question

Только начиная с машинописью, и я пытаюсь просто импортировать класс из одного файла в другой, звучит просто .. но я получаю сообщение об ошибке:

renderer.js:6 Uncaught ReferenceError: exports is not defined

I «ве получил свои основные записи файла app.ts:

import {Renderer} from '../ts/renderer.ts'; 
var renderer = new Renderer(); 
console.log("-- Start --"); 

И я это в моих renderer.ts:

export class Renderer { 
} 

Я использую Gulp для скомпилируйте мой машинописный текст в js. Вот что я использую:

var gulp = require('gulp'); 
var tsc  = require('gulp-typescript-compiler'); 
var $  = require('gulp-load-plugins')(); 

gulp.task('ts-compile', function() { 
    return gulp 
    .src('ts/**/*.ts') 
    .pipe(tsc({ 
     module: "commonjs", 
     target: "es5", 
     moduleResolution: "node", 
     sourcemap: true, 
     logErrors: true 
    })) 
    .pipe(gulp.dest('app')); 
}); 

gulp.task('js-compile', function() { 
    return gulp 
     .src(['app/**/*.js']) 
     .pipe($.sourcemaps.init()) 
     .pipe($.concat('main.js')) 
     .pipe($.sourcemaps.write()) 
     .pipe(gulp.dest('js')); 
}); 

gulp.task('watch-all', function() { 
    gulp.watch(['ts/**/*.ts'], ['ts-compile']); 
    gulp.watch(['app/**/*.js'], ['js-compile']); 
}); 

У кого-нибудь есть идеи, почему он бросает эту ошибку? Мой файл app.ts, похоже, не компилируется из-за строки «import», которая может объяснить ошибку, но это выглядит правильно для меня.

Answer 1

Для использования модулей CommonJS в браузере необходимо использовать функцию браузера.

К счастью, вы больше всего на пути. Вам просто нужно будет заменить gulp-typescript-compiler плагинами gulp-browserify и tsify.

Вот пример Gulpfile

var gulp = require('gulp'); 
var browserify = require('browserify'); 
var source = require('vinyl-source-stream'); 
var watchify = require('watchify'); 
var tsify = require('tsify'); 
var gutil = require('gulp-util'); 
var watch = require('gulp-watch'); 

var watchedBrowserify = watchify(browserify({ 
    basedir: '.', 
    debug: true, 
    entries: "src/main.ts", 
    cache: {}, 
    packageCache: {} 
}).plugin(tsify)); 

gulp.task('ts:watch', bundle); 

function bundle() { 
    return watchedBrowserify 
     .bundle() 
     .pipe(source('bundle.js')) 
     .pipe(gulp.dest('dist')); 
} 

gulp.task('default', ['ts:watch']); 
watchedBrowserify.on('update', bundle); 
watchedBrowserify.on('log', gutil.log);