如何将 javascript 与打字稿一起编译成一个包？

Question

我正在做一个项目，我们有 js 和 ts 文件，应该将它们合并到一个包文件中。

我正在使用 gulp-typescript，我的配置如下所示：

           gulp.src(cfg.ts_src)
                   .pipe(sourcemaps.init())
                   .pipe(typescript({
                       allowJs: true,
                       declaration: false,
                       diagnostics: false,
                       emitDecoratorMetadata: true,
                       experimentalDecorators: true,
                       module: "system",
                       moduleResolution: "classic",
                       noImplicitAny: true,
                       outFile: "./" + cfg.file,
                       preserveConstEnums: true,
                       pretty: true,
                       removeComments: true,
                       rootDir: "./static/" + cfg.dest,
                       target: "es5",
                   }))
               .pipe(sourcemaps.write('.', { sourceRoot: "/static/", includeContent: false }))

我遇到的问题是，当配置仅包含 js 文件时，它会创建一个包含代码的包。但是当配置中同时存在js和ts文件时，typescript会忽略javascript文件，只编译ts文件。

如何创建一个包含 js 和 ts 文件的代码并且仍然有 ts 文件的工作源映射的包？

Answer 1

您似乎在使用旧版本的 gulp-typescript。也许这是一个问题？以下是对我有用的任务，它会发出编译后的 ts + 地图和任何原始 JS：

gulp.task('build.js.dev', () => 
{
    var tsProject = ts.createProject('tsconfig.json', {
        typescript: require('typescript')
    });

    var tsResult = tsProject.src()
        .pipe(sourcemaps.init())   
        .pipe(tsProject());  

    return merge([
        //Write definitions 
        //tsResult.dts.pipe(gulp.dest(TEMP_TARGET_FOLDER)),
        //Write compiled js
        tsResult.js.pipe(sourcemaps.write(
            ".", 
            { 
                includeContent: true, 
                sourceRoot: __dirname + "/dist"
            })).pipe(gulp.dest(TEMP_TARGET_FOLDER))]);
});

备注部分：tsResult.js.pipe(sourcemaps.write(

您可以参考 gulp-typescript 文档以获取更多示例。

tsconfig 与您的选项非常相似：

{
 "compilerOptions": { 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "module": "commonjs", 
     "target": "es6",
     "sourceMap": true,
     "outDir": "dist",
     "declaration": false,
     "allowJs": true,
     "jsx": "react",
     "forceConsistentCasingInFileNames": true,
     "types": [
        "node",
        "jasmine"
     ]
 },
 "exclude": [
     "./node_modules",
     "./dist",
     "./.vscode"
 ]
}

希望对您有所帮助。

Answer 2

尝试先编译所有 TS 文件并将它们放在临时目录中，然后将所有这些文件与所有其他 JS 文件捆绑在一起。同时将所有源映射文件复制到最终目录。

如何将 javascript 与打字稿一起编译成一个包？

How do I compile javascript together with typescript into one bundle?

javascript

bundle

compilation

typescript

gulp