如何导入这个 JavaScript 库？答案

【问题标题】：How to import this JavaScript library?如何导入这个 JavaScript 库？
【发布时间】：2022-02-09 05:32:06
【问题描述】：

我用 npm 下载了easystar.js。

它的代码是这样的：

export const TOP: 'TOP'
export const TOP_RIGHT: 'TOP_RIGHT'
export const RIGHT: 'RIGHT'
export const BOTTOM_RIGHT: 'BOTTOM_RIGHT'
export const BOTTOM: 'BOTTOM'
export const BOTTOM_LEFT: 'BOTTOM_LEFT'
export const LEFT: 'LEFT'
export const TOP_LEFT: 'TOP_LEFT'

type Direction = 'TOP' | 'TOP_RIGHT' | 'RIGHT' | 'BOTTOM_RIGHT' | 'BOTTOM' | 'BOTTOM_LEFT' | 'LEFT' | 'TOP_LEFT'

export class js {

  /**
   * Sets the collision grid that EasyStar uses.
   *
   * @param {Array|Number} tiles An array of numbers that represent
   * which tiles in your grid should be considered
   * acceptable, or "walkable".
   */
  setAcceptableTiles(tiles: number[] | number): void

.
.
.
  removeAllDirectionalConditions(): void
}

我尝试过通过所有这些方式导入：

import * as easystar from 'easystarjs';
import 'easystarjs';
import {js} from 'easystarjs';

但如果我在窗口对象中放置断点，我将看不到任何名为 easystar 或 js 的内容。请问我做错了什么？

【问题讨论】：

这段代码看起来很像 TypeScript，而不是 JavaScript
库的实际名称是什么？ easystar、easystar.js、easystarjs，还是别的什么？
你在 node js 中使用这个导入吗？
你是否在使用任何使用这个 npm 的框架？

标签： typescript npm

【解决方案1】：

你应该尝试这种方式在你的js中导入它。

如果您使用的是node js：

var easystarjs = require('easystarjs');
var easystar = new easystarjs.js();

【讨论】：

谢谢，它有效！你怎么知道它需要使用require，而不是import？我看不出有什么区别。
Node js 默认使用使用 require() 函数的导入方法。如果你想使用 import 而不是 require() 那么你应该将 babel 与 node js 集成并编译 node'd 代码 ecmascript 支持。
我正在使用Parcel.js。我所有的其他 npm 包都可以在 import 上正常工作，但不是这个 :(
这是因为这个 npm 包可能没有以 ES 模块格式导出。

【解决方案2】：

如果您在 nodejs 中创建"type": "module"，那么这是可行的：

import easystarjs from 'easystarjs'

【讨论】：

【解决方案3】：

首先，我有 99.99% 的把握，这段代码是 TypeScript，而不是 JavaScript。纯 TypeScript 代码无法在浏览器中运行，必须在此之前将其编译为纯 JavaScript。如果你打开开发工具，你可能会看到一些SyntaxErrors。

然后是库和文件的名称，您对此非常含糊。 easystar、easystar.js 和 easystarjs 都可以是三个独立的库，彼此完全独立。

最后（假设上述所有问题都已解决），导入实体并不意味着将其放在 window 对象上，您仍然必须明确地说 window.<i>something</i> = <i>something</i>。

【讨论】：