如何使用ESM项目的typescript在cypress中导入相关源代码？

Question

我的打字稿项目（

"type":"module"

）的组织如下：

app
  - src
    - utils
      - util.ts
    - other-code
  - cypress
    - e2e
      - spec.cy.ts
  package.json

我正在尝试使用

 从 

util.ts

 导入 

spec.cy.ts

import { utilA } from "../../src/utils/util.js";

并遇到

Webpack compilation error: Module not found

。

我相信这与 cypress 的 typescript 编译器设置有关。我该如何修改它？将cypress文件夹内的

tsconfig.json

修改为以下没有效果。

{
    "compilerOptions": {
      "target": "es6",
      "lib": ["es6", "dom"],
      "types": ["cypress", "node"],
      "module": "NodeNext",
      "moduleResolution": "NodeNext"
    },
    "include": ["**/*.ts"]
}

我正在使用 typescript 5.2 和 cypress 13。

编辑 1：可以在此处找到重现该问题的示例项目。在

cypress

目录下添加 tsconfig.json 似乎没有考虑到

module

编译器选项。

Answer 1

从我在存储库中看到的情况来看，问题是您已经定义了

/src/utils/util.ts

但您专门导入了

../../src/utils/util.js

。

以下任何更改都可以解决该问题

• 将导入更改为

  ../../src/utils/util.ts

• 将文件扩展名更改为

  util.js

• 从导入中删除扩展

  ../../src/utils/util

Answer 2

显然，这是一个已知的问题，应该在 cypress 升级到 webpack v5 后得到解决。然而，从 cypress 13.6.3 开始，它仍然是一个错误。

按照here的建议，我使用

@cypress/webpack-preprocessor

来解决它。

import { defineConfig } from "cypress";
import webpackPreprocessor from "@cypress/webpack-preprocessor";
export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      let options = webpackPreprocessor.defaultOptions;
      const customOptions = {
        webpackOptions: {
          resolve: {
            extensionAlias: {
              '.js': ['.ts', '.js'],
            }
          }
        }
      };
      options.webpackOptions = {
        ...options.webpackOptions,
        ...customOptions.webpackOptions,
      }
      options.webpackOptions.module?.rules?.push({
          // every time webpack sees a TS file (except for node_modules)
          // webpack will use "ts-loader" to transpile it to JavaScript
          test: /\.ts$/,
          exclude: [/node_modules/],
          use: [
            {
              loader: 'ts-loader',
              options: {
                // skip typechecking for speed
                transpileOnly: true,
              },
            },
          ],
        });
      on('file:preprocessor', webpackPreprocessor(options));
    },
  },
});

请注意，这还需要将

webpack

、

ts-loader

、

@babel/core

、

@babel/preset-env

安装为

devDependencies

。