javascript - 扩展 tsconfig 似乎被忽略了

我在应用程序的根目录下有一个由 create-react-app 创建的 tsconfig。在我的应用程序的 src 文件夹中，我有一个叫做 api 的文件夹，里面是我的 Node.js 服务器端代码。我遇到的问题是，create-react-app 的 tsconfig 不适用于我服务器端代码的需求。

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "noImplicitAny": false,
    "downlevelIteration":true,
    "baseUrl": "src/",
  },
  "include": [
    "src"
  ],
  "exclude": [
    "api"
  ]
}

问题在于 "module": "esnext"。这个选项只适用于客户端代码，但在 Node 中无效，除非我有 .mjs 扩展名，如果我理解正确的话。在 Node 中，我需要将此选项设置为 commonjs。这导致我在运行代码时出现以下错误

语法错误：不能在模块外使用 import 语句

所以我尝试在 api 文件夹内创建一个新的 tsconfig 文件，该文件扩展了应用根目录的 tsconfig。这里是那段代码。

{
  "extends": "../../tsconfig",
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": true,
    "sourceMap": false,
    "noUnusedLocals": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
  }
}

感觉这完全被忽视了，因为我仍然遇到完全相同的错误。

编辑：我在根 tsconfig 中添加了一个排除 api 文件夹的选项。但仍然不起作用。

有什么想法吗？

答案＃1

虽然这并没有直接回答我的问题，但我确实通过在运行服务器端代码时给 ts-node 提供我想使用的 tsconfig 的具体路径来解决了我的问题。情况如下所示。

"start:server": "./node_modules/.bin/ts-node --compiler typescript --project src/api/tsconfig.api.json src/api/index_server.ts"

答案＃2

我也遇到了这个问题，这篇帖子帮了我很大的忙，但我不得不做一些不同的事情。

我们的问题是我们的客户端应用需要 "module": "ESNext" 来打包东西。我的开发朋友说使用 "module": "CommonJS" 会使用完整的库，因此生成的构建文件夹比使用 ESNext 大 4 MB。

我们查看了工作区和扩展，但我感觉新的 tsconfig 被忽略了，这使我找到了这篇文章。

./client-app
├── tsconfig.json
├── package.json
│
└── ./src
    ├── ./hooks, components, routes etc
    └── ./tests
        └── tsconfig.commonjs.json // child tsconfig

这是我解决它的方法 (npm run automation) "automation": "ts-node --project src/tests/tsconfig.commonjs.json ./node_modules/@cucumber/cucumber/bin/cucumber.js src/tests/features//*.feature --require-module ts-node/register --require src/tests/test.setup.ts --require src/tests/step-definitions//*.spec.ts"

--project 告诉 node 明确指定 tsconfig.json 的路径。其余部分是 cucumber 的精确路径，后面是我的 feature 文件和 step-definition 文件的路径设置。

tsconfig.json

{
  "ts-node": {
    "transpileOnly": true
  },
  "compilerOptions": {
    "target": "ES6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    **"module": "ESNext",**
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./src",
    "sourceMap": false
  },
  "include": ["src"],
  "exclude": ["node_modules", "tests", "static"]
}

tsconfig.commonjs.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "module": "CommonJS"
  }
}

我希望这将来能帮助到某人。