typescript - gulpfile.ts 因任何导入语句而失败

Question

您期望发生什么？安装 ts-node 后给定 .ts 文件时的正常 gulp 操作

到底发生了什么？

[10:24:59] Requiring external module ts-node/register
.\gulpfile.ts:3
import { __awaiter, __generator, __read, __spread } from "tslib";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Module._compile (internal/modules/cjs/loader.js:891:18)
...

如果我 tsc 我的 gulpfile.ts，那么 gulp 可以完美地处理转译后的输出。只有当我直接给 gulp gulpfile.ts 时，它才会窒息。如果我的文件包含任何导入语句，则标记我的第一条语句(即使它是注释)。

我正在使用 import { src, dest, series, parallel } from 'gulp'; (见下面的示例)而不是 const { src, dest, series, parallel } = require('gulp');因为 require() 是一个无类型的 nodejs 函数 (string) => any ，丢失所有打字信息。我的 gulpfile 中可能存在各种类型错误而不被发现，这违背了将其写入 TS 的目的。

通过下面的导入语句，VSCode 立即检测到我的错误:

      src(srcFiles)
        .pipe<NodeJS.ReadWriteStream>(newer({dest: home, ext: '.js'}))
        .pipe<NodeJS.ReadWriteStream>(sourcemaps.init())
        .pipe<NodeJS.ReadWriteStream>(ts({
          lib: ['es2016', 'dom']
          , removeComments: true
        }))
        .pipe(uglify)
        .pipe<NodeJS.ReadWriteStream>(sourcemaps.write('.')) // sourcemap as separate file
        .pipe(dest(home))

但没有打字，我花了一个星期才注意到哪里出错了。

实际上，如果我更改了所有 require()正确输入的语句 import语句，那么我就不需要手动将类型提供给 pipe<T>()对它们进行正确的类型检查。

我已经为这些 tsconfig.json 选项尝试了许多不同的值组合:

  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "module": "esnext",
    "moduleResolution": "node",
  }

ts-node 安装在本地。包.json:

  "devDependencies": {
    "ts-node": "8.8.1",
    "tslib": "^1.11.1",
    "typescript": "^3.8.3"
  }

唯一的出路是使用 gulp 将我的 gulpfile.ts 转换为 gulpfile.js 并启动第二个 gulp 来处理输出。但这听起来很复杂。

请发布您的 gulpfile 示例(最好减少到不起作用的部分) gulp 文件.ts:

import { src, dest, series, parallel } from 'gulp';
import * as uglify from 'gulp-uglify';

您使用的是什么版本的 gulp？

CLI version: 2.2.0
Local version: 4.0.2

您使用的是什么版本的 npm 和 node？

yarn -v
1.22.4

ts-node -v
ts-node v3.3.0
node v12.15.0
typescript v2.5.3

npm -v
6.7.0

Answer 1

我遇到了一个非常相似的错误:

/project/gulpfile.ts:1
import gulp from 'gulp'; // or import * as gulp from 'gulp'
       ^^^^

SyntaxError: Unexpected identifier

出现该错误是因为gulp与tsconfig.json文件中"esnext"的module值不兼容。在某些情况下，您可以更改或删除此条目，但在使用 create-react-app 时，它将在下次运行时覆盖您的编辑。

您可以通过将 ts-node block 添加到您的 tsconfig.json 文件来专门为 ts-node 指定自定义编译器选项来解决此问题，例如:

{
  "compilerOptions": {
    "module": "esnext"
  },
  "ts-node": {
    "compilerOptions": {
      "module": "commonjs"
    }
  }
}

通过此更改，您应该能够通过运行 gulp 来运行您的 gulpfile.ts。