Question

由于gulp，我一直在稳步改进我的JS工作流程。现在我已经了解了es6和打字稿的基础知识，我想将它添加到我的gulp工作流程中。我在Mac上使用Visual Studio Code，而我使用的是tsconfig.json而不是gulp-typescript选项。

我的gulp工作流程应该看起来像：

从src / ts
编译为es5
合并为单个文件
使用es6 import / exports将函数/对象从一个模块拉到另一个模块。

目标是在该模块内部有一个封闭包装模块（显示模块模式）和所有类/函数。

我目前的设置（相关行）：

var gulp = require('gulp'),
plumber = require('gulp-plumber'),
ts = require('gulp-typescript'),
tsProject = ts.createProject('tsconfig.json');

gulp.task('ts', function() {
    var tsResult = tsProject.src()
        .pipe(plumber())
        .pipe(ts(tsProject));

    return tsResult.js.pipe(gulp.dest('./'));
});

tsconfig：

{
"compilerOptions": {
    "target": "es5",
    "outFile": "build/js/app.js",
    "module": "es6",
    "noImplicitAny": true,
    "removeComments": true
},
"files": [
    "src/ts/file1.ts",
    "src/ts/file2.ts"
]
}

我创建了两个简单的测试ts文件：

文件1：

import {someFunction} from "ajax";

someFunction("Testing");

file2的：

export function someFunction(message: string) {
    let test = `Hello World ${message}`;
    console.log(test);
}

所以第一个问题：它在build / js文件夹中生成app.js，但除非我注释掉import语句，否则它是空的。我是否误解了es6导入的工作方式或者打字稿的工作方式？

第二个问题：它在root上创建一个新的目录结构，基本上是：Users / username / Documents / JS / Project / ts / files。这些文件被部分地转换为es5，保留了导出和导入关键字。

我非常喜欢typescript和es6，并希望将其添加到我的工作流程中，但到目前为止还没有任何在线资源帮助我使这个版本有效。

更新：

我刚刚意识到我正在尝试使用es6模块直接编译到ES5。既然没有工作，用commonjs模块编译成es5会更容易，然后使用像browserify这样的东西来组合代码吗？

如果我将我的tsconfig更改为：

{
"compilerOptions": {
    "target": "es5",
    "outFile": "build/js/app.js",
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true
},
"files": [
    "src/ts/file1.ts",
    "src/ts/file2.ts"
]
}

奇怪的完整路径目录包含正确转换的代码，但app.js文件仍为空白。

更新2：

我通过将"isolatedModules": false添加到我的compilerOptions来解决了奇怪的添加目录问题。我将模块更改为commonjs，因为我决定使用browserify来处理组合模块。

我将gulp.dest更改为build / js并删除了outFile。这让我得到了正确的目录中的输出，但它将它添加到子文件夹。基本上我想要它输出：build / js / files但它输出build / js / src / ts / files。

更新3：

我只是想为遇到此问题的其他人添加一些内容。我遇到模块问题的原因是因为我使用的是outFile。 outFile不允许外部模块，并将输出一个空文件。

需要帮助获取gulp打字稿工作流程

0 个答案: