从另一个文件导入打字稿类

不吃早餐

只是从打字稿开始，我试图将一个类从一个文件导入到另一个文件，听起来很简单..但我不断收到错误消息：

renderer.js：6未捕获的ReferenceError：未定义导出

我有主入口文件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文件似乎无法编译，但对我来说似乎正确。

马丁

您需要使用browserify才能在浏览器中使用CommonJS模块。

幸运的是，您已经到了那里。你只需要更换gulp-typescript-compiler与一饮而尽，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);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。