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 的目的。

使用下面的 import 语句，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 示例（最好减少到不起作用的部分） 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 与文件中module的值不兼容。在某些情况下，您只需更改或删除此条目，但使用 create-react-app 时，它将在下次运行时覆盖您的编辑。"esnext"tsconfig.json

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

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

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