Playwright - 语法错误：意外的标记“导出” - 外部 npm 包

Question

我创建了 npm 包以便在我们的组织中使用它。它包含一些可重用的测试代码。它已发布到我们的内部源，并且我已安装在目标项目中，没有任何问题。 包含剧作家测试的目标项目，当我尝试运行它们时，当我尝试从该 npm 包导入任何内容时，它开始显示错误：

 SyntaxError: Unexpected token 'export

在这个项目中，我使用node.js 20和typescript，我已经安装了babel并配置为使用typescript预设。在我的 tsconfig 中，我还设置为“module”：“ESNext”，但是我仍然有这个问题。我的 npm 包实际上有相同的配置。我有点迷失这里缺少的东西。

tsconfig

{
    "compilerOptions": {
        "jsx": "react",
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noUnusedLocals": true,
        "esModuleInterop": true,
        "module": "ESNext",
        "target": "ESNext",
        "allowSyntheticDefaultImports": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "allowJs": true,
        "noEmit": true,
        "lib": ["ESNext", "DOM"],
        "baseUrl": "./src",
        "paths": {}
    },
    "include": ["src/**/*",".vscode/babel.config.js"]
}

巴贝尔配置

module.exports = {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: {
            node: 'current',
          },
        },
      ],
    ],
  };

我也将其包含在 package.json 中

    "jest": {
        "transform": {
            "^.+\\.jsx?$": "babel-jest"
        },
        "transformIgnorePatterns": [
            "/node_modules/(?!(somePkg)|react-dnd|core-dnd|@react-dnd)"
          ]
    },

Answer 1

我也遇到了同样的问题，我认为问题出在 Playwright 及其编译/转换的方式中......我解决它的方法是确保我的包不包含除 .d 之外的任何 .ts 文件。 ts 并被打包到 commonjs 中，因此不使用导出关键字。为此，我做了这些我认为对您有用的更改：

在packages.json 上我添加了：

scritpts:{
...
    "build": "rm -rf dist; tsc",
...
},
  "files": [
    "dist",
    "README.md"
  ],

这保证了我们进行编译并且仅打包 dist 内的内容。

在 tsconfig.json 上我更改/添加了：

    "outDir": "./dist",
    "noEmit": false,
    "declaration": true,
    "module": "CommonJS",
    "moduleResolution": "node",

我测试这是否是通过执行

npm build

然后执行

npm pack

然后在我想使用它的项目上安装了生成的 tarball。

我没有使用 babel，所以我不确定这会如何干扰，但我希望这会有所帮助。