在ts-node+Gulp环境中使用import导入Gulp返回undefined，require导入却正常的问题求助

我之前碰到过一模一样的情况，这本质是TypeScript编译CommonJS模块时的导出兼容问题，咱们一步步拆解原因和解决办法：

问题根源 #

你的tsconfig里设置了module: "CommonJS"，这时候TypeScript会把import Gulp from "gulp"编译成这样的JavaScript：

const Gulp = require("gulp").default;

但Gulp的CommonJS导出是直接把整个工具对象挂在module.exports上的，根本没有.default这个属性——所以运行时Gulp自然就变成undefined了。而const Gulp = require("gulp")直接取的是module.exports本身，所以能正常工作。

至于TypeScript没报错，是因为你开了allowSyntheticDefaultImports: true，这个选项只是让TypeScript在类型检查时允许你对没有默认导出的模块用默认导入语法，但不会帮你处理运行时的兼容问题。

两种可行的解决方案 #

方案1：使用命名空间导入（推荐） #

直接把导入语句改成命名空间导入的形式，这样TypeScript编译后的代码会和你原来的require写法完全一致：

import * as Gulp from "gulp";

这种写法既保留了TypeScript的类型提示，又能保证运行时正常获取Gulp对象，是最稳妥的选择。

方案2：开启esModuleInterop配置 #

在你的tsconfig.json的compilerOptions里添加"esModuleInterop": true：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "moduleResolution": "node",
    "esModuleInterop": true, // 新增这一行
    "experimentalDecorators": true,
    "strict": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "allowJs": false,
    "skipLibCheck": true,
    "baseUrl": "./",
    "paths": {}
  }
}

这个选项会让TypeScript自动为CommonJS模块生成兼容层，把import Gulp from "gulp"编译成：

const Gulp = require("gulp");

这样你就可以继续使用默认导入的写法，同时运行时也能正常拿到Gulp对象。另外提一句：esModuleInterop会自动启用allowSyntheticDefaultImports，所以你原来的那个配置项可以保留也可以删掉，不影响效果。

选其中一种方案调整后，再执行gulp <task-name>应该就能正常运行了。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD