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 参数或任何其他方式来传递 正则表达式 编译许多文件。 允许此工作流程的任何其他方法？

Answer 1

在做了一些研究后，这是一个有效的解决方案：

在项目目录的根目录中使用以下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中安装一个手表。

Answer 2

您可以在项目的根目录中创建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启动任务运行器。

使用全局tsc参数

2 个答案: