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

Question

我正在尝试在桌面上运行这个 repository 一个 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) Warning: To load an ES module, set "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

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

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

1. 迁移到 es6 模块，调用所有 .js 文件 - .mjs，将 __dirname 用法更改为 const __dirname = dirname(fileURLToPath(import.meta.url));
2. 然后我在 package.json 中设置"type": "module"
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、节点。
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 2

{

"version": "0.2.0",
"configurations": [
    {
        "type": "pwa-node",
        "request": "launch",
        "name": "Launch Program",
        "skipFiles": [
            "<node_internals>/**"
        ],
        "cwd": "${workspaceFolder}",
        "program": "${workspaceFolder}/index.js",
        "runtimeArgs": ["-r","esm"],
    }
]

}

Answer 3

要解决此问题，请更改扩展文件名。

例如，如果您的模块 javascript 文件名为 script.js - 将名称更改为 script.mjs。

对将使用导入的文件和将导出的文件都执行此操作。

此外，在 index.html 页面中，请确保您使用 .mjs 扩展名引用该文件，例如：

<script type="module" src="script.mjs"></script>

Answer 4

在package.json 文件中添加"type": "module"。

Answer 5

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

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

有一个警告告诉我--experimental-loader 是一个实验性功能，但我不在乎，因为我只用它来调试打字稿代码。

Answer 6

在您的package.json 中设置"type": "module" 应该可以工作。再次检查您是否在输入时出错。当我输入它时解决了我的问题。