使用全局 tsc 参数在 vscode 中设置构建任务

Question

我们有以下项目结构

+-- views
    +-- viewXXX
        +-- ts
        ¦    +-- controller.ts
        ¦    +-- helper.ts
        ¦    +-- ... (*.ts)
        +-- viewXXX.ctrl.js // this is the desired output file
        +-- viewXXX.ctrl.map.js
        +-- viewXXX.html

我们正在尝试在 VSCode 中配置一个允许按照此结构进行编译的任务...

// A task runner that calls the Typescript compiler (tsc)
{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "showOutput": "silent",
    "args": [
        "-t",
        "es5",
        "-m",
        "commonjs",
        "--sourceMap",
        "--out",
        "${fileDirname}.ctrl.js",
        // "--filesGlob", missing
        "${fileDirname}\ts\*.ts"
    ],
    "problemMatcher": "$tsc"
}

我们无法让它工作，因为没有 --filesGlob 参数，或任何其他传递 的方法regex 编译许多文件。 任何其他允许此工作流程的方法？？

Answer 1

你可以在项目的根目录下创建一个tsconfig.json：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "inlineSourceMap": false,
    "sourceMap": true,
    "out": "${fileDirname}.ctrl.js"
  },
  "filesGlob": [
    "${fileDirname}\ts\*.ts"
  ]
}

然后通过“-p”参数设置tsconfig.json的目录：

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "showOutput": "silent",
    "args": ["-p", "."],
    "problemMatcher": "$tsc"
}

最后，通过 CTRL+SHIFT+B 启动任务运行器。

Answer 2

经过一些研究，这里有一个可行的解决方案：

在项目目录的根目录中使用以下package.json

{
  "dependencies": {
    "gulp": "^3.9.0",
    "gulp-typescript": "^2.10.0",
    "gulp-sourcemaps": "^1.6.0"
  }
}

npm install
中.vscode/task.json:

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "default",
            // Make this the default build command.
            "isBuildCommand": true,
            // Show the output window only if unrecognized errors occur.
            "showOutput": "silent"
        }
    ]
}

在项目根目录的 gulpfile.js 中：

var gulp = require('gulp');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');

var views = [
  "views/view1",
  "views/view2"  
];

function buildView(viewBasePath) {
    var finalName = viewBasePath.split('/').pop();

    var tsResult = gulp.src(viewBasePath + '/ts/*.ts') 
        .pipe(sourcemaps.init())
        .pipe(ts({
            "module": "commonjs",
            "target": "es5",
            "out": finalName + '.ctrl.js'
        }));

    return tsResult.js
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(viewBasePath));
}

gulp.task('default', function () {
    for(var i = 0; i < views.length; i++) {
        buildView(views[i]);   
    }
});

如果要构建，请使用组合 CTRL+SHIFT+B 或在 gulpfile 中安装一个 watch。

使用全局 tsc 参数在 vscode 中设置构建任务

Set up build task in vscode with global tsc parameters

typescript

tsc

visual-studio-code