多个 Typescript 文件编译成独立的 javascript 文件

Posted 2023-03-13

【中文标题】多个 Typescript 文件编译成独立的 javascript 文件

【英文标题】：Multiple Typescript files compiled into self-contained javascript file

【发布时间】：2019-07-17 09:39:44

【问题描述】：

我知道有 1000 多个这样的问题。我已经浏览了所有（大部分）。

我发现的所有答案似乎都已过时、已更改、使用已停产的 NPM 包，或者使用了 2 年前的错误报告的包来报告我遇到的错误。

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

我想写这样的 Typescript（东西）：

文件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】：

我想通了。如果有人过来发现这个，请使用此处的指南： 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'));
);