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，丢失了所有类型信息。我的 gulp 文件中可能存在各种类型错误而未被发现，这违背了将其写入 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 安装在本地。 Package.json:

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

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

请 post 您的 gulp 文件的示例（最好减少到仅不起作用的部分） gulpfile.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 时，它将在下一个运行.

覆盖您的编辑

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

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

通过此更改，您应该能够运行您的 gulpfile.ts 只需运行宁 gulp.

gulpfile.ts 任何导入语句均失败

gulpfile.ts fails with any import statement

import

typescript

gulp