javascript - 无法将 d3-geo 包导入 Node.js TypeScript 项目

Question

我正在尝试创建代码来测试是否可以在各种 GeoJSON 功能中找到特定的纬度/经度坐标。

如果我这样做:

import d3 from 'd3-geo'; // or: import * as d3 from 'd3-geo' // makes no difference

console.log(d3.geoContains);

...运行使用:node --require ts-node/register app.ts

...我收到此错误:

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/kshetline/temp/geo/node_modules/d3-geo/src/index.js from /Users/kshetline/temp/geo/app.ts not supported.Instead change the require of index.js in /Users/kshetline/temp/geo/app.ts to a dynamic import() which is available in all CommonJS modules.at Object. (/Users/kshetline/temp/geo/app.ts:6:34)at Module.m._compile (/Users/kshetline/temp/geo/node_modules/ts-node/dist/index.js:735:29)at Object.require.extensions. [as .ts] (/Users/kshetline/temp/geo/node_modules/ts-node/dist/index.js:737:16) {code: 'ERR_REQUIRE_ESM'}

所以我尝试按照错误消息的建议使用 import():

import('d3-geo').then(d3 => console.log(d3.geoContains));

...这只会给我一个更短但相似的错误消息:

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/kshetline/temp/geo/node_modules/d3-geo/src/index.js from /Users/kshetline/temp/geo/app2.ts not supported.Instead change the require of index.js in /Users/kshetline/temp/geo/app2.ts to a dynamic import() which is available in all CommonJS modules.at /Users/kshetline/temp/geo/app2.ts:21:43 {code: 'ERR_REQUIRE_ESM'}

我在 tsconfig.json 中尝试了不同的模块类型和目标，但这没有帮助。这是我为演示此问题而创建的精简测试项目中的 tsconfig.json:

{
  "compilerOptions": {
    "target": "es2021",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

这是 package.json:

{
  "name": "geo",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "author": "",
  "license": "MIT",
  "dependencies": {
    "d3-geo": "^3.0.1"
  },
  "devDependencies": {
    "@types/d3-geo": "^3.0.2",
    "ts-node": "^10.4.0",
    "typescript": "^4.5.5"
  }
}

我从来没有遇到过让我在尝试进行简单导入时遇到这么多麻烦的 npm 库。我可以让它在纯 JavaScript 中工作，但即便如此，它也必须是动态的 import()，这是一种必须使用库的恼人方式。

有什么想法可以让这项工作变得更好吗？

Answer 1

我还没有一个满意的答案，但至少我有一个愚蠢的解决方法。我在我的 tsconfig.json 文件中设置了 "allowJs": true，添加了一个名为 module-bridge.cjs 的 JavaScript 文件，如下所示:

module.exports = {
  d3_geo: async function () { return import('d3-geo'); }
};

然后我将其放入我的 TypeScript 代码中:

import { d3_geo } from './module-bridge.cjs';

// ...

const geoContains = (await d3_geo()).geoContains;

您可能认为我可以直接在我的 TypeScript 代码中使用 import('d3-geo')，但这会产生编译错误。