将多个Typescript文件编译为独立的javascript文件

时间:2019-02-23 12:24:12

标签: typescript webpack gulp gruntjs

我知道其中有数千个问题。我已经仔细检查了所有这些内容。

我发现的所有答案似乎都已过时,已更改,使用了已停产的NPM软件包或带有2年之久的关于我得到的错误的错误报告的软件包。

我愿意使用任何任务运行程序,程序包,导入格式等。

我想这样写打字稿(之类的东西):

文件1:

import FileTwoClass from "./File2"
export default FileOneClass{
    fieldOne:number = 12

    doStuff(){
        FileTwoClass.importantFunction(this.fieldOne)
    }
}

文件:App.ts:

import FileOneClass from "./File1" 
class App{
    run(){
        FileOneClass.doStuff();
    }
}

let app = new App()
app.run();

并让taskrunner(或其他任何工具)吐出一个文件,其中包含在链接的Typescript文件中设置的所有依赖项。

我会以错误的方式进行操作,还是可以实现? 如果是这样,究竟如何? :D

谢谢!

1 个答案:

答案 0 :(得分:0)

我知道了。如果有人来找得到,请在此处使用指南: https://www.typescriptlang.org/docs/handbook/gulp.html

并使用“ @ babel / preset-env”:“ ^ 7.3.1”,而不是es2015预设。

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var tsify = require('tsify');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');

gulp.task('default', function () {
    return browserify({
        basedir: '.',
        debug: true,
        entries: ['ts/app.ts'],
        cache: {},
        packageCache: {}
    })
        .plugin(tsify)
        .transform('babelify', {
            presets: ['@babel/preset-env'],
            extensions: ['.ts']
        })
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist'));
});