如何从已安装的 npm 模块导入

一尘不染

javascript

我有一个网页，有一天我想托管。我使用 npm 在 dev 文件夹中安装了一些包，它们出现在 node_modules 子文件夹中。我想在 js 模块中使用这些包，但是 import 语句不起作用，因为文档让我期望。

以gsap为例：

npm 安装 gsap

鉴于此，html 看起来像这样：

索引.html

<html>
  <head>
  </head>

<body>
  <div id="app"></div>
</body>
<script type="module" src="./index.js"></script>
</html>

我希望我应该能够拥有一个如下所示的 js 模块：

index.js

// per https://greensock.com/docs/v3/Installation
import { gsap } from "gsap"; // ERROR HERE

console.log(gsap);

未捕获的类型错误：无法解析模块说明符“gsap”。相对引用必须以“/”、“./”或“../”开头。

放置 a/或 a./或我尝试过的任何其他路径组合会产生未找到的错误。我唯一可以开始工作的就是这个，我通过在 node_modules 文件夹中挖掘发现…

import { gsap } from "/node_modules/gsap/gsap-core.js"; // this works, but yikes
console.log(gsap);

我必须做错事才能知道该路径和文件名。我有一些我想使用的包，我希望不必调查每个包来找到实际的模块文件所在的位置。

有人可以让我直截了当吗？

阅读 87

2022-07-26

共1个答案

一尘不染

js import { gsap } from "/node_modules/gsap/gsap-core.js"; // this works, but yikes

原则上没有什么特别讨厌的。

浏览器不是 Node.js。它们的工作方式与 Node.js 不同。他们不能去翻找你服务器的文件系统，以便仅仅根据它的名字来寻找一个模块。

你必须给他们一个你想要导入的 JS 文件的 URL。

令人讨厌的是，您正在通过 HTTP 公开整个 node_modules 目录，而您可能不想这样做。

在浏览器中使用通过 NPM 安装的模块的典型方法是使用捆绑器，例如Webpack或Parcel，它将获取您的代码所依赖的所有模块并将它们捆绑到分发中以发送到浏览器（同时进行优化等如摇树）。

2022-07-26