要加载 ES 模块，请在 package.json 中设置 "type": "module" 或使用 .mjs 扩展名

Question

我试图在桌面上运行这个存储库一个 vscode 扩展。

我在本地克隆它并运行 npm install

在 vscode 编辑器上按 f5 并出现错误

Process exited with code 1
(node:1404) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
internal/process/warning:44
Canceled

为了解决这个警告，我发现了另一个 stackoverflow 问题 - (node:9374) 警告：要加载 ES 模块，请设置 "type": "module"

所以我设置"type":"module"上package.json，然后按F5一次。

并出现另一个错误。

Process exited with code 1
Uncaught TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /mnt/c/vscode-php-debug/src/phpDebug.ts

并在 stackoverflow 上发现了另一个问题 - Can't run my Node.js Typescript project TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /app/src/App.ts

所以我删除了 "type":"module" 发生的事情是我现在在循环中，混淆。

有没有人试过调试这个或遇到这样的？

Answer 1

使用以下命令对节点 v14.16.1 有效：

node --loader ts-node/esm --experimental-specifier-resolution=node index.ts

There is a warning telling me that --experimental-loader is an experimental feature but I don't care because I only use it to debug the typescript code.

Answer 2

尝试使用https://www.npmjs.com/package/tsx代替。并且不会再面临这个问题。

Answer 3

在从 js（带有 commonJs 模块）迁移到支持 Eslint 和 Prettier 的 Typescript 过程中，遇到了这个问题以及许多相关问题。主要问题是 Node.js 需要在 .js 文件中导入 commonJs并允许在 .mjs 中使用 es6modules。Typescript 默认生成 .js 文件，因此有 2 种方法来处理它：

方式 1（如果你想将 ts 文件编译为支持 es6modules 的 js）：

1. 迁移到 es6 模块，称为所有.js文件 - .mjs，将__dirname用法更改为const __dirname = dirname(fileURLToPath(import.meta.url));
2. 然后我"type": "module"在package.json中设置
3. 然后我为 tsconfig.json 添加了这样的配置：

{
  "compilerOptions":
    {
      "target": "es2018",
      "module": "es2020",
      "outDir": "dist",
      "sourceMap": true,
      "allowJs": true,
      "esModuleInterop": true,
      "moduleResolution": "node",
      "strict": true, 
    },
  "include": ["./src"],
  "exclude": ["node_modules"],
}

4. .eslintrc.json 的配置如下所示：

{
    "root": true,
    "env": {
      "es2020": true,
      "jasmine": true,
      "jest": true,
      "node": true
    },
    "settings": {
      "noInlineConfig": true,
      "node": {
        "tryExtensions": [".js", ".ts", ".d.ts"],
        "moduleDirectory": ["node_modules", "src/"]
      },
      "import/resolver": {
        "node": {
          "extensions": [".js", ".ts", ".d.ts"],
          "moduleDirectory": ["node_modules", "src/"],
          "typescript": {}
        },
        "typescript": {
          "alwaysTryTypes": true,
          "project": "."
        }
      }
    },
    "parser": "@typescript-eslint/parser",
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:node/recommended",
      "airbnb-base",
      "prettier"
    ],
    "parserOptions": { "ecmaVersion": 2018, "sourceType": "module" },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
      "import/extensions": "off",
      "linebreak-style": "off",
      "node/no-unsupported-features/es-syntax": "off",
      "no-underscore-dangle": "off",
      "import/prefer-default-export": "off",
    }
}

5. 在一个终端中我运行：npx tsc -w
6. 在另一个：npm run start启动脚本中："start": "nodemon --es-module-specifier-resolution=node dist/server.js"

方式2（如果你不关心编译后的js代码，可以是commonJS）：

1. 迁移到 es6 模块，调用所有.js文件 - .ts，添加类型，__dirname按原样保留用法（将由 @types/node 处理）并安装 @types/node、ts-node、nodemon。
2. 在 package.json 中"type": "commonjs", "main": "src/{your_root_file}.ts",
3. 然后我为 tsconfig.json 添加了这样的配置：

{
  "compilerOptions":
    {
      "target": "es6",
      "module": "commonjs",
      "outDir": "dist",
      "esModuleInterop": true,
      "lib": ["es6"],
      "moduleResolution": "node",
      "strict": true, 
      "noEmitOnError": true,
      "noImplicitAny": true,
      "experimentalDecorators": true, // for typeorm
      "emitDecoratorMetadata": true // for typeorm
    },
  "include": ["./src"],
  "exclude": ["node_modules"],
}

4. .eslintrc.json 的配置如下所示：

{
    "root": true,
    "env": {
      "es2020": true,
      "jasmine": true,
      "jest": true,
      "node": true
    },
    "settings": {
      "noInlineConfig": true,
      "node": {
        "tryExtensions": [".js", ".ts",".mjs", ".d.ts"],
        "moduleDirectory": ["node_modules", "src/"]
      },
      "import/resolver": {
        "node": {
          "extensions": [".js", ".ts", ".d.ts", ".mjs"],
          "moduleDirectory": ["node_modules", "src/"],
          "typescript": {}
        },
        "typescript": {
          "alwaysTryTypes": true,
          "project": "."
        }
      }
    },
    "parser": "@typescript-eslint/parser",
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:node/recommended",
      "airbnb-base",
      "plugin:import/errors",
      "plugin:import/warnings",
      "plugin:import/typescript",
      "prettier"
    ],
    "parserOptions": { "ecmaVersion": 2018, "sourceType": "module", "project": "./tsconfig.json" },
    "plugins": [
        "@typescript-eslint",
        "eslint-plugin-tsdoc",
        "import"
    ],
    "rules": {
      "tsdoc/syntax": "warn",
      "import/extensions": "off",
      "linebreak-style": "off",
      "node/no-unsupported-features/es-syntax": "off",
      "no-underscore-dangle": "off",
      "import/prefer-default-export": "off",
      "@typescript-eslint/no-explicit-any": "error",
      "quotes": [
        "error",
        "single"
      ],
      "semi": [
        "error",
        "always"
      ]
    }
}

5. 在终端中：npm run start启动脚本："start": "nodemon src/server.ts" Nodemon 将自动检测它是否在 .ts 文件上运行，并将使用 ts-node 来运行您的应用程序。

Answer 4

设置"type": "module"在你package.json应该工作的地方。再次检查是否输入错误。当我输入它时解决了我的问题。