标签: tsify

我有一个"中等"的Typescript应用程序(在很简单,但不是企业级,数千行)依赖于jQuery,React和SocketIO - 以及其他较小的库.

我目前的gulpfile是这样的:

var gulp = require("gulp"),
    $ = require("gulp-load-plugins")(),
    _ = require("lodash"),
    tsify = require("tsify"),
    browserify = require("browserify"),
    source = require("vinyl-source-stream"),
    debowerify = require("debowerify"),
    watchify = require("watchify"),
    lr = require("tiny-lr"),
    buffer = require("vinyl-buffer");

var lrServer = lr();

var config = {
    scripts: {
        base: __dirname + "/Resources/Scripts",
        main: "Application.ts",
        output: "App.js"
    },

    styles: {
        base: __dirname + "/Resources/Styles",
        sheets: ["Application.less", "Preload.less"],
        autoprefixer: ["last 2 version", "safari 5", "ie 8", "ie 9", "opera 12.1", "ios 6", "android 4"]
    }, …

为什么我的problemMatcher不起作用？我非常肯定正则表达式,但它没有报告任何问题,即使有一些关于stdout ......

// the matcher
"problemMatcher": {
    "owner": "typescript",
    "fileLocation": ["relative", "${workspaceRoot}"],
    "pattern": {
        "regexp": "^TypeScript (warning|error): (.*)\\((\\d+),(\\d+)\\): (.*)$",
        "severity": 1,
        "file": 2,
        "line": 3,
        "column": 4,
        "message": 5
    }
}

//the browserify/tsify pipeline
browserify().add('main.ts')
  .plugin(tsify, { noImplicitAny: false, removeComments:true })
  .transform("babelify",{ extensions: ['.ts'], presets: ["es2015"]})
  .bundle()
  .on('error', function (error) { console.log(error.toString()); })
  .pipe(source('bundle.js'))
  .pipe(gulp.dest('www/js/dist/'));

//gulp sample output
[00:39:00] Starting 'ts-compile'...
TypeScript error: main.ts(118,30): Error TS2339: Property 'object' does not exist on type 'boolean'.
TypeScript error: main.ts(137,24): Error TS2339: Property …

我正在使用 TypeScript 开发一个在 webbrowser 中使用的库。

我正在使用“system”作为--module编写单独的打字稿文件作为模块，例如这是主文件：

/// <reference path="../typings/tsd.d.ts" />
/// <reference path="./typings/simple-html-tokenizer/simple-html-tokenizer" />

export * from "./Decorators/Component";
export * from "./Decorators/Directive";
export * from "./Decorators/Inject";
export * from "./Decorators/Injectable";
export * from "./Events/EventEmitter";
export * from "./Core/Bootstrap";
export * from "./Decorators/Output";
export * from "./Decorators/Input";
export {OnChanges, OnInit, OnDestroy} from "./Core/LifeCycle/LifeCycleHooks";

这是第一个模块：

import {serviceNormalize} from "../Utils/AngularHelpers";

export interface IComponentMetadata {
    template?: string;
    templateUrl?: string;
    selector?: string;
    directives?: Function[];
    outputs?: string[];
    inputs?: string[];
    styles?: string[];
    providers?: (Function|string)[];
}

/**
 * …

嗨,这个问题让我很难过.

我想知道,在从TS编译并使用Browserify后,我可以将我的SourceMaps(来自gulp-sourcemaps)一直指向我的TS文件.

目前我有它工作,所以我使用tsify编译TS然后我将它全部捆绑到一个all.js然后uglify(minify)它到一个all.min.js. 我也有SourceMaps但只能从缩小版本映射到all.js.

我已经搜索了很多.之前我已经完成了SourceMaps,从JS缩小到我的TS,但在那种情况下我没有使用Browserify.

我目前的工作Gulp任务:

gulp.task('scripts', function(){
    return browserify(paths.mainJs)
        .plugin(tsify)
        .bundle()
        .on('error',console.error.bind(console))
        .pipe(source('all.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init())
        .pipe(gulp.dest(paths.outscripts))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.outscripts));
});

请注意,这里的一个重要问题是源映射调用之间的所有内容都需要支持gulp-sourcemaps,而Browserify不支持.Gulp也有一个Typescript编译器,但是我如何使用Browserify？

谢谢!