如何从 npm 安装模块导入

Question

I have a webpage that I'd someday like to host.我有一个网页，有一天我想托管它。 I've installed a few packages in the dev folder using npm, and they appear in the node_modules sub-folder.我使用 npm 在 dev 文件夹中安装了一些包，它们出现在 node_modules 子文件夹中。 I'd like to use these packages in a js module, but the import statement doesn't work as the docs lead me to expect.我想在 js 模块中使用这些包，但 import 语句并不像文档引导我期望的那样工作。

Taking gsap as an example:以gsap为例：

npm install gsap npm 安装 gsap

Given that, and html that looks like this:鉴于此，html 看起来像这样：

index.html index.html

<html>
  <head>
  </head>

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

I expect I should be able to have a js module that looks like this:我希望我应该能够拥有一个如下所示的 js 模块：

index.js索引.js

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

console.log(gsap);

Uncaught TypeError: Failed to resolve module specifier "gsap".未捕获的类型错误：无法解析模块说明符“gsap”。 Relative references must start with either "/", "./", or "../".相对引用必须以“/”、“./”或“../”开头。

Placing a / , or a ./ or any other combinations of paths I've tried produces a not found error.放置/或./或我尝试过的任何其他路径组合会产生未找到的错误。 The only thing I can get to work is this, which I figured out by digging around in the node_modules folder...我唯一可以开始工作的就是这个，这是我通过在 node_modules 文件夹中挖掘发现的......

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

I must be doing something wrong to have to know that path and file name.我必须做错事才能知道该路径和文件名。 I have a few packages I'd like to use, and I hope to not have to investigate each one to find where the actual module file resides.我有几个我想使用的包，我希望不必逐一调查以找到实际模块文件所在的位置。

Can somebody set me straight?有人可以让我直截了当吗？

Answer 1

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

There's nothing particularly yikes about that in principle.原则上没有什么特别令人讨厌的。

Browsers are not Node.js. They do not work the same way as Node.js. They cannot go rummaging about your server's file system in order to look for a module based on just its name.浏览器不是 Node.js。它们的工作方式与 Node.js 不同。它们不能 go 翻遍服务器的文件系统以仅根据其名称查找模块。

You have to give them a URL to the JS file you want to import.你必须给他们一个 URL 到你想要导入的 JS 文件。

What is yikes about this is that you are exposing your entire node_modules directory over HTTP, and you probably don't want to do that.令人讨厌的是，您在 HTTP 上公开了整个 node_modules 目录，您可能不想这样做。

A typical approach to using modules installed via NPM in the browser is to use a bundler such as Webpack or Parcel which will take all the modules your code depends on and bundle them up in to a distribution for sending to the browser (while doing optimisations such as tree shaking).在浏览器中使用通过 NPM 安装的模块的典型方法是使用诸如Webpack或Parcel之类的捆绑器，它将获取您的代码所依赖的所有模块并将它们捆绑到分发中以发送到浏览器（同时进行优化，例如如摇树）。

如何从 npm 安装模块导入

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-07-25 16:27:50

如何从 npm 安装模块导入

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-07-25 16:27:50

解决方案1
1 已采纳 2022-07-25 16:27:50